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, if 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.