Question About mutate(key) and Unmounted Components

[cmagoun]

Greetings, I am having an issue with some unexpected behavior with regards to mutate(key). In my data fetching code, I have these hooks/functions:

const recentOptions = {
    refreshInterval: 0,
    revalidateOnFocus: false,
    dedupingInterval: 180000000    //or 500
}

export const useRecent = () => {
    const {data, error} = useSWR(
        `${config.apiUrl}/GetRecentFoundations`,
        getThenResolve,
        recentOptions
    );

    return {
        recent: data,
        isLoading: !error && !data,
        isError: error
    };
}

export const setRecent = async(fid) => {
    await postThenResolve(
        `${config.apiUrl}/SetFoundationRecent`,
        {fid});

    //TODO: So the behavior I am seeing tends to indicate that
    //mutate(key) sends out a message to swr to refetch, but doesn't
    //necessarily cause the cache to be invalidated.
    //This means that mutate will cause any CURRENTLY MOUNTED useSWR()
    //to refetch and re-render, but ones that aren't mounted will
    //return with stale data.
    mutate(`${config.apiUrl}/GetRecentFoundations`);
}

I also have a component that fetches data with useRecent():

const FoundationRecents = props => {
    const {recent, isLoading} = useRecent();

    if(isLoading) return <div>...LOADING...</div>;
    if(!recent) return null;

    return <SimpleCard
        titlebg={colors.blue}
        titlefg={colors.white}
        titlesz='small'
        title='Recent'
        contentbg={colors.white}
        component={<FoundationRecentsView recent={recent}/>}
    />
}

I use this pattern in two places currently, one where the component is mounted when the setRecent() occurs. The other, where the component is unmounted. When the component is mounted, everything works fine. When mutate() is called, everything seems to refetch and rerender.

However, when setRecent() is called when the component is unmounted, and I later return to it, I get stale data, and no refetch.

I think I must be misunderstanding what mutate(key) does, or maybe I am unclear as to what the dedupingInterval is. I thought, that even with a high deduping interval, the mutate would cause the GetRecentFoundations cache to be invalid, and thus the next call to useSWR() would require a revalidate, regardless if the SWR was mounted at the time of the mutate or not.

What am I doing incorrectly?

[promer94]

export const useRecent = () => {
    const {data, error} = useSWR(
        `${config.apiUrl}/GetRecentFoundations`,
       // Only when component is mounted, swr can have this function to do refetching
        getThenResolve,
        recentOptions
    );

    return {
        recent: data,
        isLoading: !error && !data,
        isError: error
    };
}

export const setRecent = async(fid) => {
    await postThenResolve(
        `${config.apiUrl}/SetFoundationRecent`,
        {fid});
    // what you do here is same as mutate(`${config.apiUrl}/GetRecentFoundations`, undefined, true)
    // The cahce wont be update because the data is undefined
    // when component is not mounted, swr wont refetch because it does not have the fetcher function
    // when component is mounted, swr will refetch and update cache correctly
    mutate(`${config.apiUrl}/GetRecentFoundations`);
}

export const setRecent = async(fid) => {
    await postThenResolve(
        `${config.apiUrl}/SetFoundationRecent`,
        {fid});
    // get the fresh data
    const data = getThenResolve(`${config.apiUrl}/GetRecentFoundations`)
   // update the cache
    mutate(`${config.apiUrl}/GetRecentFoundations`, data);
}

[cmagoun]

Sorry it took so long to check this out. I ended up having another project to get to. I did just get back to this and indeed, it is the answer. Still, it seems I would like to have a method that essentially tells swr to invalidate the cache for a given key, and ignore the deduping interval -- so force a fetch on the next call. No big deal though, as this will work.

Thank you very much!

[cmagoun]

Thank you for the reply. I am going to try this tomorrow.

[cajias]

I ran into this issue while invalidating keys using the global mutate function. In my case, I could regenerate the cache key I wanted to invalidate, so I delete the entry from the cache before calling mutate. If the mutate function does not re-fetch and add the entry back to the cache, once a component does mount which tries to read from the missing cache key, swr will just treat it as a cache miss and do the re-fetching.