useQueryState with push mode is not updated after browser back

[gkielwasser]

Context

What's your version of next-usequerystate?
1.13.0

Next version: 14.0.3

Are you using:

• ❌ The app router
• ✅ The pages router

Description

I'm using useQueryState with the history push mode. I would expect using browser back button would update query state. It seems back is not taken in account and therefore the state is not updated.

Reproduction

CodeSandbox

I'm not sure it can be well reproduced in CodeSandbox.

Example: Steps to reproduce the behavior:

1. Click on "Open"
2. See: query param is well added, also with see a new history entry
3. do browser back
4. See: query param is well deleted
5. See: the state of the query param is not updated.

[franky47]

Thanks for the report, could you please try and enable the windowHistorySupport experimental flag and let me know if the error still occurs ?

Looks like 14.0.3 broke shallow routing entirely unless this flag is on, see #416 and a PR to track it #417.

[gkielwasser]

Thanks for the report, could you please try and enable the windowHistorySupport experimental flag and let me know if the error still occurs ?

Looks like 14.0.3 broke shallow routing entirely unless this flag is on, see #416 and a PR to track it #417.

Yes have the windowHistorySupport enabled. I have also tested with "next": "14.0.4-canary.32"

It seems the same issue happen on this demo Builder pattern. But in this playground windowHistorySupport seems not enabled.

[gkielwasser]

More generally with useQueryState, any kind of shallow routing won't work with 14.0.3 but also won't work with 14.0.2
As a consequence I'm not sure it is related with windowHistorySupport introduced in 14.0.3, nor with next 14.0.3.

searchParams = useSearchParams() will never be synchronized.

I have updated the CodeSandbox to illustrate shallow routing well updated searchParams while it won't with useQueryState.

1. Click add params with router
2. See: search params is updated
3. Do a fresh new test
4. Click open
5. See: search params is not updated

[frontendparham]

I have the same issue, how can I fix it?
"next": "^14.0.3"
"next-usequerystate": "^1.13.0"

[franky47]

If using the app router: try using [email protected], which fixes shallow routing.

If using the pages router, unfortunately the issue has been here for a while, and is being tracked in #419. I'm having a hard time making it work with all combinations of basePath and dynamic routes.

[frontendparham]

I updated from "next": "^14.0.3" to "next": "^14.0.4-canary.37" and it fixes the issue.

[franky47]

I merged #419 which includes a fix for history: 'push' on the pages router. It's available in [email protected]. @gkielwasser can you please give it a try and let me know if it fixes your issue?

For the app router, updating Next.js to 14.0.4 is required to get the shallow routing fix (which impacts push).

[gkielwasser]

I merged #419 which includes a fix for history: 'push' on the pages router. It's available in [email protected]. @gkielwasser can you please give it a try and let me know if it fixes your issue?

For the app router, updating Next.js to 14.0.4 is required to get the shallow routing fix (which impacts push).

Yep good job, I confirm push is well sync now

[franky47]

Thanks for your feedback @gkielwasser, 1.13.2 has been released.