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

Question

我有一个使用useQueryReact Query的组件，如下所示：

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

selectedStore是一个可以从 UI 更改的本地状态变量，触发对新产品的 API 的请求。我的问题是，我还需要在另一个组件中使用来自请求的数据，最好是通过queryCache.getQueryData，但要做到这一点，我需要提供一个键，不仅是字符串，"Products"而且是整个数组["products", selectedStore]。

另一个组件无权访问selectedStore，所以我的问题是，另一个组件是否可以在不提升selectedStore到全局状态的情况下访问此查询数据？我想将数据保留在其中queryCache而不是提升它。

Answer 1

因此，如果您想检索特定密钥的数据，则需要（完整）密钥。将客户端状态移到树上，以便所有需要它的组件都可以访问它，或者，如果需要的话，移动到全局客户端状态似乎是最好的解决方案。

queryClient.getQueryData还支持查询过滤器，因此您可以根据需要使用自定义匹配函数对 queryKey 进行匹配。但在不知道它selectedStore是什么的情况下，如果缓存中有多个条目，例如["products", 1]和["products", 2]，您怎么知道要使用哪一个呢？

另请注意，这queryClient.getQueryData是一个命令式操作，不会创建订阅 - 因此如果底层数据发生更改，该组件将不会重新呈现。只有useQuery自定义订阅（通过queryClient.getQueryCache().subscribe）可以做到这一点。