reactjs - 从另一个组件使用 React-Query QueryCache

Question

我有一个使用 useQuery 的组件来自这样的 React Query:

const { data } = useQuery(
    ["products", selectedStore],
    fetchProductsByStoreId
) 

selectedStore是一个可以从 UI 更改的本地状态变量，触发对新产品的 API 的请求。我的问题是，我还需要在另一个组件中使用来自请求的数据，最好通过 queryCache.getQueryData ，但要做到这一点，我需要提供一个 key ，不仅仅是字符串 "Products"但整个阵列["products", selectedStore] .
另一个组件无权访问 selectedStore ，所以我的问题是，其他组件是否可以在不提升的情况下访问此查询数据 selectedStore到全局状态？我想将数据保存在queryCache也不把它吊起来。

Answer 1

因此，如果要检索特定键的数据，则需要(完整)键。将您的客户端状态向上移动到树以使其可供所有需要它的组件访问，或者，如有必要，全局客户端状态似乎是最好的解决方案。queryClient.getQueryData还支持查询过滤器，因此您可以根据需要在 queryKey 上使用自定义匹配函数进行匹配。但不知道是什么selectedStore是，如果缓存中有多个条目，例如["products", 1]和 ["products", 2] ，你怎么知道用哪一个？
另请注意 queryClient.getQueryData是一个不创建订阅的命令式操作 - 因此，如果基础数据发生更改，则不会重新呈现该组件。只有 useQuery或者自定义订阅(通过 queryClient.getQueryCache().subscribe )可以做到这一点。