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.

mutate in useSWRInfinite is broken when passing data and revalidate true

See original GitHub issue

Bug report

Description / Observed Behavior

When using useSWRInfinite, if we call the bound mutate function and we pass the data argument, the data is not updated or revalidated.

Expected Behavior

I expect useSWRInfinite to both update the cache and re-fetch data from source.

Repro Steps / Code Example

CodeSandbox

Notice how mutate(data) doesn’t update the cache or revalidate the data but mutate(data, false) does update the cache. mutate() revalidates with no issues.

Additional Context

SWR version. 0.4.0

I guess this is because the mutate function for useSWRInfinite is not updating the cached pages with the data parameter before calling useSWR mutate. When the infinite fetcher adapter runs, this is equal: config.compare(originalData[i], pageData). mutate from useSWR will just update the global cache key for the infinite list, not the individual pages as this code would assume

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:11
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
pedro-pedrosacommented, Feb 4, 2021

for workaround you can do:

mutate(data, false)
mutate()

the first one mutates the cache, the second triggers revalidation.

2reactions
pedro-pedrosacommented, Jan 22, 2021

forgot to save my sandbox before sharing. it should be okay now

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 - NPM Package Versions - Socket - Socket.dev
mutate ( '/api/item?id=123', data => update(data), true ). The only difference is if you pass a function instead of a specific key, SWR...
Read more >
swr: Versions | Openbase
mutate ( '/api/item?id=123', data => update(data), true ). The only difference is if you pass a function instead of a specific key, SWR...
Read more >
react has detected a change in the order of hooks - You.com
const { data, error, size, setSize } = useSWRInfinite( (pageIndex, previousPageData) => { // reached the end if (previousPageData && !
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