Cannot read query string parameters in statically cached pages

Describe the bug

Because I statically cache pages, I load my sprig components using the 's-trigger': 'load' directive, so that an AJAX request to index.php?p=actions/sprig-core/components/render is made initially to get the dynamic contents of the component. The problem is that the AJAX request doesn’t include any query string parameters, and because of that they are lost and I cannot read them inside my component. And since the page is statically cached I cannot pass the initial query string parameter like this {{ sprig('mycomponent', {page: craft.app.request.getParam('page') ?? 1}, {'s-trigger': 'load'}) }}

To reproduce

Steps to reproduce the behaviour:

1. Create a mypage.twig file and Initialize a component like this {{ sprig('mycomponent.twig', {}, { 's-trigger': 'load'}) }}
2. Inside mycomponent.twig, print the query parameter page like this

{% if sprig.isRequest %}
    {% dd page %}
{% endif %}

1. Try to load mypage?page=5
2. See an error Variable "page" does not exist.

Expected behaviour

I’d expect the query string parameters to be included in the index.php?p=actions/sprig-core/components/render requests

[bencroker]

@Harry-Harrison You could probably use JavaScript to inject query string parameters as hidden input fields into the Sprig component before it refreshes on load, if need be.

[Harry-Harrison]

If anyone lands on this thread in future trying to do what I was doing, this is how I’ve done it.

With Blitz set to “Cache URLs with unique query strings as the same page”…

{# Top level page #}
{{ sprig('mysprig/component', {}, { 's-trigger': 'load' }) }}

{# Component – ?id= is the param we're after #}
{{ hiddenInput('idVar', '') }}

{% js %}
    var urlParams = new URLSearchParams(location.search);
    document.getElementsByName("idVar")[0].setAttribute("value", urlParams('id'));
{% endjs %}

{% if sprig.isRequest %}
    {{ idVar }}
{% endif %}

If anyone has a better way, I’d love to know, but this worked great for me 👍