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.

Cannot use global mutate with useSWRInfinite

See original GitHub issue

Bug report

Description / Observed Behavior

There is no way to mutate data fetched with useSWRInfinite without first fetching the data client-side. I saw this answer by @shuding and it definitely works, but it triggers a fetch when all I want to do is mutate data (if it has already been fetched).

Expected Behavior

Instead, I should be able to mutate local data without triggering a fetch. The global mutate function should allow me to mutate data that has already been fetched (e.g. on a page that uses useSWRInfinite) on a page that should not trigger a fetch of that data.

My (pretty common I think) use-case:

  1. I have a list of emails fetched using useSWRInfinite on a /feed page.
  2. When the user opens an email, they can modify it on a /messages/[id] page.
  3. I want to mutate the data shown on the /feed page when the data is edited on the /messages/[id] page.

But, the user can also open the /messages/[id] page directly, in which case the /feed page will never have been opened and useSWRInfinite will never have been called. In this case, I don’t want to trigger a fetch with useSWRInfinite.

Repro Steps / Code Example

This is the project I’m working on: nicholaschiang/hammock.

Additional Context

SWR version: 0.5.5 Related to #435.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:11
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
shudingcommented, Jun 1, 2021

I’m not sure if it’s a good idea to expose internal implementation details (things like inf), as they will likely to change over time. The idea of #1174 is to support use cases like mutate(regex) or mutate(filterFn) in the future.

While useSWRInfinite is a truly special case, I’d propose a mutateInfinite method so you can do mutateInfinite(KEY_FOR_FIRST_PAGE) or mutateInfinite(getKey). It basically hides the inf inside.

7reactions
koba04commented, May 29, 2021

A solution in https://github.com/vercel/swr/issues/1156#issuecomment-845264050 might work at this time, but it would be broken in the future. For example, https://github.com/vercel/swr/pull/1174 breaks your solution. I think SWR should provide a solution to generate the key, which doesn’t depend on the internal implementation if there is any valid use-case that the global mutate has to use.

Read more comments on GitHub >

github_iconTop Results From Across the Web

useSWRInfinite with pagination and mutate features
I'm using useSWR to fetch data from client side in nextjs. What I am doing and trying to achieve. I am using useSWRInfinite...
Read more >
Mutation & Revalidation
There're 2 ways to use the mutate API to mutate the data, the global mutate API which can mutate any key and the...
Read more >
SWR v1 is here: What's new?
The recommended practice is to use SWR APIs such as mutation. 3. useSWRConfig(). While the SWRConfig context provides global configuration ...
Read more >
swr - NPM Package Versions - Socket
Start using Socket to analyze swr and its 0 dependencies to secure your app ... You can now pass a filter function to...
Read more >
swr: Versions
You can now pass a filter function to the global mutate API to match any keys ... This means that you can't use...
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