Cached rendering depending on a parameter

Question

I'm trying to render a template given a request parameter but I get the same result once the cache is set.

Let's say I have this template :

-- {{ step }} -- {{ xxx }} --
{% if not step %}not step{% endif %}
{% if step == 1 %}step 1{% endif %}
{% if step == 2 %}step 2{% endif %}

And this preprocessor

function themename_preprocess_page(&$variables) {
    $request = \Drupal::request();
    $variables['step'] = null;
    $variables['xxx'] = rand ();

    if ($request->query->has('step')) {
        $variables['step'] = $request->query->get('step');
    }
}

When I work with the cache template disabled, I get the expected resut, e.g when requesting page?step=1, I get step 1, page?step=2, I get step 2 and so on. However, when the cache is enabled, the first page load is correct and the subsequent loads take the same markup (if I first load page?step=1, I get step 1 whatever parameter I use after that).

How can I tell Drupal to process my variable even if the cache is enabled?

Answer 1

Add the cache context url.query_args in preprocess:

function themename_preprocess_page(&$variables) {
  $variables['#cache']['contexts'][] = 'url.query_args';

Or more specific:

  $variables['#cache']['contexts'][] = 'url.query_args:step';