useSWRInfinite with Next.js router query parameters vs pages

[horgen]

Bug report

Description / Observed Behavior

I've noticed that useSWRInfinite is behaving weird in Next.js when using the router query parameters to change the URI key. The issue is only visible after going back or forward in the browser.

Repro Steps / Code Example

I have made a copy of the official infinite example here:

• https://swr-infinite-issue.vercel.app/
• https://github.com/horgen/swr-infinite-issue

Note: I'm console logging the size to make it easier to see the change in the following cases.

Case 1 (working as expected):

1. Go to https://swr-infinite-issue.vercel.app
2. Click the "load more" button two times.
3. Click the "pages/page.js" link at the top. This will change the URI key by going to a new page (...and remounting all the things).
4. Go back to the previous page by click the back button in your browser

Result: useSWRInfinite will remember the correct size: 3 of the first page.

Case 2 (not working as expected):

1. Go to https://swr-infinite-issue.vercel.app
2. Click the "load more" button two times.
3. Click the "pages/index.js - 2" link at the top. This will change the URI key by updating a router query parameter.
4. Go back to the previous page by click the back button in your browser

Result: useSWRInfinite will remember the correct size: 3 of the first page for a second before resetting it to 1.

[viktorrudi]

+1

[promer94]

Thanks for reporting this! The example is really helpful ❤️