如何使用 react-query 从兄弟组件重新获取查询

Question

我想知道如何使用 react-query 从另一个同级组件重新获取查询。

假设我有组件 A

 import {useQuery} from "react-query";

 function ComponentA(){

    const getData = async () => data //returns api data

    const {data, refetch} = useQuery(["queryA"], async () => await getData())

    return(

         <div>
           {data}
         </div>

   )}

在组件 B 中

 import {useQuery, QueryClient} from "react-query";

 function ComponentB(){

    const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: Infinity,
        },
    },
})

const refreshQueryFromComponentA = async () => {
     await queryClient.refetchQueries(["queryA"], { active: true })
}

    return(

         <div>
           <button onClick={refreshQueryFromComponentA}/>
         </div>

   )}

在 Page.js 中

 import ComponentA from "./componentA";
 import ComponentB from "./componentB";

 function Page(){

    return(

         <div>
           <ComponentA/>
           <ComponentB/>
         </div>

   )}

当我在 ComponentB 中调用 refreshQueryFromComponentA 函数时，我看不到 ComponentA 中的查询刷新或网络选项卡中对后端的新调用。 我也使用了正确的查询键，但我只能使用来自 useQuery 函数的 refetch() 函数重新获取 ComponentA 中的查询。

我认为我正在尝试做的事情是可能的，因为 react-query 使用上下文并且应该在整个应用程序中可用。 但也许我使用了错误的方法或误解了它。

提前谢谢大家！

Answer 1

您的应用程序顶部需要有一个 QueryClient。 QueryClient 持有 queryCache，它存储您的数据。 如果您在 componentB 中创建一个新的，它不会与 componentA 共享任何内容。 此外，请确保将其添加到 QueryClientProvider 并通过useQueryClient()检索它。 客户端也需要稳定，所以不要每次渲染都创建一个新的。 这是来自文档的第一页：

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
2 
3 const queryClient = new QueryClient()
4 
5 export default function App() {
6   return (
7     <QueryClientProvider client={queryClient}>
8       <Example />
9     </QueryClientProvider>
10   )
11 }