3

我遇到了一些关于 mutate(key) 的意外行为的问题。在我的数据获取代码中，我有这些钩子/函数：

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`);
}

我还有一个使用 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}/>}
    />
}

我目前在两个地方使用这种模式，一个是组件在setRecent()发生时安装的地方。另一个是卸载组件的位置。安装组件后，一切正常。当mutate()被调用时，一切似乎都重新获取并重新渲染。

但是，如果在卸载组件时调用 setRecent()，然后我返回它，我会得到陈旧的数据，并且不会重新获取。

我想我一定是误解了什么mutate(key)，或者我不清楚它是什么dedupingInterval。我认为，即使重复数据删除间隔很高，变异也会导致 GetRecentFoundations 缓存无效，因此下一次调用useSWR()将需要重新验证。

4

0 回答 0