algolia / algolia/instantsearch

NextJS `router.query` is stale after hitting back button

Open
#6,002 9 comments 0 reactions 0 assignees View on GitHub
triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.