algolia / algolia/instantsearch
NextJS `router.query` is stale after hitting back button
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
### 🐛 Current behavior
If you hit a filter value, `router.query` gets populated correctly with the new URL. If you hit the browser back button, the facet selection gets cleared but `router.query` still has the old filter selection and the component doesn't even get re-rendered.
### 🔍 Steps to reproduce
1. Click on any Brand filter.
2. In dev tools you will see `router.query` being logged with the brand filter.
3. Hit the back button.
4. In dev tools you won't see anything logged because `router.query` hasn't been updated.
### Live reproduction
https://codesandbox.io/p/devbox/nextjs-routing-issue-x9p8gy
### 💭 Expected behavior
I expect:
1. `router.query` to have a new value
2. That new value to be an empty object
3. The component to re-render and trigger a log of `router.query`
### Package version
algoliasearch 4.14.3, react-instantsearch 7.5.1, NextJS 12.3.4
### Operating system
Mac 11.6.5
### Browser
Chrome 113.0.5672.126
### Code of Conduct
- [X] I agree to follow this project's Code of Conduct
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction and follow the listed steps: apply a Brand filter, inspect the logged router.query, then use the browser back button. Compare the expected empty query and component re-render with the observed behavior; done means the back navigation updates router.query and triggers the log.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100