infinite: do not revalidate every page on mutate(undefined)
See original GitHub issueBug report
Description / Observed Behavior
When I use .mutate(), all pages are revalidated even tough nothing changed in the first page, and the keys didn’t change
This behaviour happens regardless of revalidateIfStale
, and regardless of the new revalidateFirstPage
Expected Behavior
Do not revalidate if the first page is the same and keys are the same
Repro Steps / Code Example
const key = useCallback((page: number, previous: Data | null) => {
// First page
if (page === 0 || !previous)
return h(`topics`) // h is just a query builder
// No next page
if (!previous.after)
return null
// Next page
const [after] = previous.after
return h(`topics`, { after })
}, [])
const res = useSWRInfinite<Data>(key, fetcher, {})
const refresh = useCallback(() => {
res.mutate()
}, [res])
return <button onClick={refresh}>
refresh
</button>
Additional Context
happening on both swr@1.0.1 and swr@1.1.0-beta.6
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Mutation & Revalidation - SWR
SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate),...
Read more >Revalidating data using mutate in SWR - Which should I use?
To solve this problem using the mutate function exported directly by swr , it will suffice just to pass the same key to...
Read more >SWR v1 is here: What's new? - LogRocket Blog
SWR is a hooks library that provides React Hooks for remote data fetching. ... This means the state does not change when we...
Read more >How to use SWR in Next JS - client-side data-fetching technique
Complex use case; Mutation and revalidation with useSWR; Conclusion. Data fetching patterns are an essential component of every web ...
Read more >Mutations | TanStack Query Docs
Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, React Query exports a useMutation ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If you call
res.mutate()
, everything will be revalidated. That’s currently the expected behavior:https://github.com/vercel/swr/blob/e1677522d86017ec84099f90be03ec9607baf34b/infinite/index.ts#L190-L191
We need to improve the local mutation API for pages a bit.
Hi!
Have there been any updates regarding this issue? I’d like to be able to mutate & revalidate a specified page, and not all the loaded pages when calling
mutate()
. Is this possible in any way with the current implementation?