How to refetch queries from sibling component with react-query

Question

I was wondering how to refetch a query from another sibling component with react-query.

Lets say I have Component 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>

   )}

And in Component 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>

   )}

And in Page.js

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

 function Page(){

    return(

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

   )}

When I call the refreshQueryFromComponentA function in ComponentB I do not see the query refresh in ComponentA or a new call to the backend in the network tab. I also use the correct query-key but I am only able to refetch the query in ComponentA with the refetch() function which comes from the useQuery function.

I think it's possible what I'm trying to do, since react-query uses context and should be available throughout the whole application. But maybe I'm using the wrong method or misinterpreted it.

Thanks in advance everyone!

TkDodo · Accepted Answer · 2021-07-05 13:20:22Z

3

There needs to be one QueryClient at the top of your app. The QueryClient holds the queryCache, which stores your data. If you create a new one in componentB, it won’t share anything with componentA. Also, make sure to add it to the QueryClientProvider and retrieve it via useQueryClient(). The client also needs to be stable, so don’t create a new one each render. This is from the first page of the docs:

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 }

answered Jul 5, 2021 at 13:20

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Re-Angelo Over a year ago

Ah my apologies I have one queryClient in my toplevel app.js. I just used this as a trivial example. But I do see where I"m making a mistake, by creating a new queryClient inside ComponentB which indeed wont share any data with componentA. I need to find the correct way to access the queryClient methods from the toplevel QueryClientProvider inside my ComponentB. Thanks!

TkDodo Over a year ago

Yes, the correct way would be useQueryClient()

Re-Angelo Over a year ago

Thanks, didnt even know how I missed this 😂😂

Collectives™ on Stack Overflow

How to refetch queries from sibling component with react-query

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related