reactjs - react 查询，查询不更新参数

Question

我使用 react-query 库来获取我的数据。当用户更改时，如果自动删除以前的用户数据并获取新数据，我会很高兴。

这确实发生了，但没有发生，api 使用旧的 userId 被调用了几次，只有在 1 或 2 次重新关注应用程序后，它才会使用正确的新 userId 获取数据。这是钩子(Hook):当我在 getData 函数中记录一些信息时，我可以看到它在注销后使用旧 userId 被调用了几次。

export default function useData() {
    const {user} = useAuth();
    const queryClient = useQueryClient();
    useEffect(() => {
        queryClient.removeQueries('data')
        queryClient.invalidateQueries()
    }, [user]);
    return useQuery('data', () => getData(user!.uid), {
        enabled: !!user,
    })
}

有谁知道如何在我的用户更改时删除所有数据？

Answer 1

查询的所有依赖项都应该在查询键中，因为当键更改时，react-query 会自动重新获取。这也在文档中 here .

在您的情况下，这意味着添加用户 ID:

useQuery(
  ['data', user?.uid],
  () => getData(user!.uid),
  {
    enabled: !!user,
  }
)

为了清除旧的缓存条目，我可能建议在您的查询中设置 cacheTime: 0，这意味着它们将在最后一个观察者卸载后立即被垃圾回收。手动调用 queryClient.removeQueries 也是一种选择。