6

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

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

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

另一个组件无权访问selectedStore，所以我的问题是，有没有一种方法可以让其他组件在不提升selectedStore到全局状态的情况下访问此查询数据？我想将数据保留在其中queryCache，也不要将其提升。

4

2 回答 2

1

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

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

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

于 2021-03-29T12:49:14.957 回答
0

将 param 放在路由中是另一种在组件之间共享数据的方法，但 React.Context 更适合它。

于 2021-06-18T23:45:34.890 回答