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.

Can not mutate data from SWRInfinite with `revalidateFirstPage: false` when key is not mounted

See original GitHub issue

Bug report

I can not manually refresh data using mutate when using SWRInfinite and revalidateFirstPage: false and key of that mutate is not bound to current page.

Description / Observed Behavior

I have a list of items, which I fetch using useSWRInfinite. Since I do not want to fetch the first page everytime user fetches next page, I use it with revalidateFirstPage: false option, and that works great. So, imagine I have a list of items: A, B, C, D, E. Each item have also its own details page. I can change item A to Aa and use mutate when I am on list page to refresh cache without calling request again, and that also works. The problem is when I go to page A and change that item’s name to Aa - even though I call exactly the same methods, when I go back to list page, the item is still A, not Aa. I tested it a lot of times, and that scenario works when I remove revalidateFirstPage: false from useSWRInfinite. But without it I have to load first page every time user scrolls down, which slows down loading new data…

Expected Behavior

Cache is always updated when using mutate, but first page is not fetched everytime when I want to fetch n+1 page

Additional Context

SWR version 1.2.0

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:14

github_iconTop GitHub Comments

4reactions
tomaszczuracommented, Jul 10, 2022
0reactions
condinoaljosephcommented, Jul 9, 2022

We can not use mutate returned from useSWRInfinite, since we need a way to mutate our cache from different components in our code, even those which do not use useSWRInfinite. Also, we can not use unstable_serialize, because we may not know the exact key - our real keys contain a lot of query params, and we want to modify all keys which contains some text (e.g. all with param type=image). We checked the cache, and key starting with $inf.... is always updated with our method, but this state is overwritten when going from point 3 to 4 (without any mutate or API call). What we discover is that if I have keyA for useSWRInfinite, you create two entries incache: one with keyA and one with $inf$keyA. Our useMatchMutate updates the second one, but does not touch the first. This approach worked in version 1.0.0-beta.5 (and earlier), and it still works when revalidateFirstPage is true.

If that is not a valid way of updating cache, do you have any adice for us how to update cache, when we do not know the exact key and without access to bound mutate?

we have same use case on our end, any updates?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mutation & Revalidation - SWR
When you call mutate(key) (or just mutate() with the bound mutate API) without any data, it will trigger a revalidation (mark the data...
Read more >
Renovate Bot Package Diff
+ _b = SWRGlobalState.get(cache), MUTATION = _b[2];. 293. 297. // If there is no new data provided, revalidate the key with current state....
Read more >
Mutating an API route using SWR - Théo Louvel
We also pass the false key in order to let swr know that we do not want to revalidate this data: Again, that...
Read more >
Infinite Queries | TanStack Query Docs
Note: It's very important you do not call fetchNextPage with arguments unless you want them to override the pageParam data returned from the...
Read more >
swr: Versions | Openbase
A failed mutation will not cause useSWR 's error to be updated: ... of a specific key, SWR will use it to match...
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