react-query：为什么这个查询总是陈旧的？答案

【问题标题】：react-query: why is this one query always stale?react-query：为什么这个查询总是陈旧的？
【发布时间】：2020-12-20 02:02:15
【问题描述】：

我已经为每个文档配置了具有无限陈旧时间的 react-query，如下所示：

    <ReactQueryConfigProvider config={{
        queries: {
            staleTime: Infinity
        }
    }}>

我的大多数查询都不会过时，除了一个，我的“个人资料”查询：

const getProfile = async () => {
    if (!isAuthenticated()) {
        return null;
    }
    try {
        const response = await axios.get('/user/profile');
        return response.data;
    }
    catch (error) {
        errorCheck(error);
    }
};

export const useProfile = () =>
    useQuery('profile', getProfile);

这是保存当前用户个人资料的查询。 isAuthenticated() 是一个同步调用，用于检查我们是否有用户令牌（所以我不会进行我知道会失败的 API 调用）。

由于某种原因，在 react-query devtools 窗口中，此查询立即显示为过时。我真的看不出我对这个有什么不同。有什么调试建议吗？

【问题讨论】：

也许稍微简化一下代码会有所帮助。看看getPokemonList这里：codeworkshop.dev/blog/…
你有解决这个问题的办法吗，吉姆？
不，仍然是个问题。它并没有完全阻止我，但我不知道这是由什么引起的。
是的，在下面添加了我的解决方案作为答案。

标签： reactjs axios react-query

【解决方案1】：

我遇到了同样的问题，这是由具有使用 react-query 的子组件的组件引起的。检查您的组件树并确保在 <ReactQueryConfigProvider> 之外没有使用 useProfile()。

【讨论】：

我不明白为什么在多个地方使用 useProfile 很重要。它只会更新多个组件，不是吗？

【解决方案2】：

这就是我认为的问题所在，以及我是如何解决的。

因为我在ReactQueryConfigProider 中设置了staleTime: Infinity，所以我希望我的所有查询都不会过时。

此查询的不同之处在于，当发生非 UI 驱动的事情时，我将其无效。

我的代码中有一个会话计时器，当会话过期时，它会调用 queryCache.invalidateQueries('profile') 以触发任何显示配置文件的 UI 以重新呈现。

似乎如果invalidateQueries 在查询上下文之外被调用，ReactQueryConfigProider 中的设置不会被观察到，所以staleTime 设置为默认值 0。

为了解决这个问题，对于我需要在计时器上无效的查询，我将{ staletime: Infinity } 明确添加到查询中：

export const useProfile = () => {
    const { data: session } = useSession();
    const userId = session?.userId;
    return useQuery(['profile', userId], getProfile, { staleTime: Infinity });
};

我不会说这是 react-query 中的错误，但这似乎是一种解决方法。

【讨论】：