2

根据文档，我已经为 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 窗口中，此查询立即显示为过时。我真的看不出我对这个有什么不同。有什么调试这个的建议吗？

4

2 回答 2

0

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

于 2020-11-17T19:07:50.593 回答
0

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

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

此查询的不同之处在于，当发生非 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 中的错误，但这似乎是一种解决方法。

于 2021-04-17T17:50:05.840 回答