Mutation after unmount

[roddyyaga]

I have one route /profile with a component that uses SWR to fetch some data, then either displays it or redirects to /needs_login if there's an error (the error being represented by the form of the data fetched, not the request itself failing). After the user successfully logs in on that route, they are redirected to /profile.

By default, what happens is that after the user successfully logs in on /needs_login they are redirected to /profile and immediately redirected back to /needs_login because the error state is still cached. I thought I could deal with this by calling mutate(key) in /needs_login before redirecting to /profile but this doesn't work. I think this is because the revalidator listener is removed (from CACHE_REVALIDATORS) on unmount so the mutation is ignored. Is this right and if so how can I deal with it?

[sergiodxa]

This is happening because you mutate(key) only triggers a revalidation if the useSWR hook using that same key is mounted, what you could do is to call await mutate(key, fetcherForThatKey) before the redirect and that will fill it with the new data. Another options you have here is to delete the cache for that key, you can do it with cache.delete(key) and cache.delete(cache.serializeKey(key)[2]) (this last one removes the error key from the cache), this way when you go back to the profile nothing will be cached and a new request will be made.

If possible, I recommend you to fetch before the navigation instead of dealing with the cache directly.

[roddyyaga]

Thanks, mutating with the fetcher worked!

[agjs]

Hi @sergiodxa. I have the same issue but your suggestion doesn't work for me.

const created = await ArticleService.createArticle({
    title,
    summary,
    content,
    tags,
});

await mutate("/articles", async (cached) => {
    return [...cached, created];
});

history.push(getRedirectURL(slug, created.slug), {
    article: created,
});

This happens in one view, more specifically, route called /write. Once the user submits the new article and once I go back to the articles list (which is a different view), article isn't there and I have to refresh.

I have also logged the data from the hook and for some reason, it seems it's firing multiple times and second to last time the articles.length seems to be accurate, but then it gets overwritten by another request. Would highly appreciate the help. I'm nearly at the edge to just switch back to Redux, which is my go-to state machine, SWR really gave me headaches for several hours now.