question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

infinite: do not revalidate every page on mutate(undefined)

See original GitHub issue

Bug 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:open
  • Created 2 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
shudingcommented, Dec 23, 2021

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.

0reactions
iDarkLightningcommented, Jan 29, 2022

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found