You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Non server-rendered React app, not using NextJS or other frameworks, just vanilla React.
Current scenario
In an event handler, I'm making a remote mutation to the server, and when the mutation succeeds I am redirecting to a new route via a client navigation (w react-router)
Desired outcome
The mutation response contains all of the data that the new route will need, so I want to be able to pre-fill the SWR cache for a specific key with the data from the mutation response, so that by the time the new route renders and we hit the useSWR hook for that key, we can skip making a network request for the data we already have.
What I've tried
mutate
My initial inclination was to use the global mutate, however since there is no useSWR hook mounted for that key by the time I call mutate to pre-fill the data, the cache won't actually be updated, as stated in the docs here:
In an ideal world, this would still work and pre-populate the cache for me, even if an useSWR hook for that key isn't mounted.
preload
I specifically do not want to call preload because I don't just want to start fetching early, I want to avoid making a new request altogether.
Custom cache
I realize I could keep my own cached data in state or context, set the data in my separate cache/context, and then provide that data to useSWR via fallbackData, but I really wish I didn't have to implement my own cache on top of SWR and I could just use SWR primitives.
I considered directly writing to the SWR cache, but I realize that is discouraged and instead mutate is the recommended alternative.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Current setup
Non server-rendered React app, not using NextJS or other frameworks, just vanilla React.
Current scenario
In an event handler, I'm making a remote mutation to the server, and when the mutation succeeds I am redirecting to a new route via a client navigation (w
react-router
)Desired outcome
The mutation response contains all of the data that the new route will need, so I want to be able to pre-fill the SWR cache for a specific key with the data from the mutation response, so that by the time the new route renders and we hit the
useSWR
hook for that key, we can skip making a network request for the data we already have.What I've tried
mutate
My initial inclination was to use the global
mutate
, however since there is nouseSWR
hook mounted for that key by the time I callmutate
to pre-fill the data, the cache won't actually be updated, as stated in the docs here:In an ideal world, this would still work and pre-populate the cache for me, even if an
useSWR
hook for that key isn't mounted.preload
I specifically do not want to call
preload
because I don't just want to start fetching early, I want to avoid making a new request altogether.Custom cache
I realize I could keep my own cached data in state or context, set the data in my separate cache/context, and then provide that data to
useSWR
viafallbackData
, but I really wish I didn't have to implement my own cache on top of SWR and I could just use SWR primitives.I considered directly writing to the SWR cache, but I realize that is discouraged and instead
mutate
is the recommended alternative.What's the best course of action here?
Beta Was this translation helpful? Give feedback.
All reactions