title: How to refetch queries from sibling component with react-query
body: <p>I was wondering how to refetch a query from another sibling component with react-query.</p>
  <p>Lets say I have Component A</p>
  <pre><code> import {useQuery} from &quot;react-query&quot;;
  
   function ComponentA(){
  
      const getData = async () =&gt; data //returns api data
  
      const {data, refetch} = useQuery([&quot;queryA&quot;], async () =&gt; await getData())
  
      return(
  
           &lt;div&gt;
             {data}
           &lt;/div&gt;
  
     )}
  </code></pre>
  <p>And in Component B</p>
  <pre><code> import {useQuery, QueryClient} from &quot;react-query&quot;;
  
   function ComponentB(){
  
      const queryClient = new QueryClient({
      defaultOptions: {
          queries: {
              staleTime: Infinity,
          },
      },
  })
  
  const refreshQueryFromComponentA = async () =&gt; {
       await queryClient.refetchQueries([&quot;queryA&quot;], { active: true })
  }
  
      return(
  
           &lt;div&gt;
             &lt;button onClick={refreshQueryFromComponentA}/&gt;
           &lt;/div&gt;
  
     )}
  </code></pre>
  <p>And in Page.js</p>
  <pre><code> import ComponentA from &quot;./componentA&quot;;
   import ComponentB from &quot;./componentB&quot;;
  
   function Page(){
  
      return(
  
           &lt;div&gt;
             &lt;ComponentA/&gt;
             &lt;ComponentB/&gt;
           &lt;/div&gt;
  
     )}
  </code></pre>
  <p>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.</p>
  <p>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.</p>
  <p>Thanks in advance everyone!</p>