title: how to use React query cache
body: <p>I'm trying to create a website where you fetch metrics and dimensions from the nodejs server using react query displaying them in a list then imply drag and drop on that list to drag an element and drop it in a zone. The problems I'm facing is that first I must Have a global state which I already figured it out by calling useQuery again with the same key . The other problem is idk if I have to modify the react query cache(by setQueryData) or directly the fetched data by the useQuery Hook(wouldn't that cause bugs?). Also another question is it the cache that is being used to render the html or no? I'm kind of new to these things...</p>
  <p>here is the custom Hook for fetching data:</p>
  <pre><code>import axios from &quot;axios&quot;;
  import { useQuery } from &quot;react-query&quot;;
  
  const useMetadata = (kind:string) =&gt; {
      return useQuery(
          `properties-${kind}`,
          () =&gt; {
            return axios.get(`http://localhost:8000/ga/${kind}`)
          })
  }
  
  export default useMetadata
  </code></pre>
  <p>Here is the list of metrics/dimensions :</p>
  <pre><code>import { Droppable } from &quot;react-beautiful-dnd&quot;;
  import Property from &quot;./Property&quot;;
  import Spinner from &quot;../../../utils/Spinner/Spinner&quot;;
  import useMetadata from &quot;../../../hooks/useMetadata&quot;;
  type Props ={
    kind: 'metrics' | 'dimensions';
  }
  type metadataType = {
    uiName:string,
    name:string,
    description:string,
    _id:string,
  }
  const Properties = (props: Props) =&gt; {
    const { kind } = props;
    const { data, isLoading, error } =  useMetadata(props.kind);
    const metadata = data?.data.data.metadata.map((item:metadataType, index: number) =&gt; {
      let property;
  
      property = (
        &lt;Property index={index} id={item._id} key={index} name={item.uiName} /&gt;
      );
  
      return property;
    });
  
    return (
      &lt;div className=&quot; flex flex-col justify-center items-center w-full&quot;&gt;
            &lt;h3 className=&quot; text-2xl font-semibold&quot;&gt;{kind}&lt;/h3&gt;
  
      {isLoading? &lt;Spinner/&gt;: &lt;div className=&quot;flex w-full justify-around items-center&quot;&gt;
      &lt;Droppable droppableId=&quot;Properties&quot;&gt;
        {(provided) =&gt; (
          &lt;ul ref={provided.innerRef} {...provided.droppableProps} className=&quot; list-none overflow-y-scroll h-96 flex flex-col justify-center items-center font-semibold&quot;&gt;
            {metadata}
            {provided.placeholder}
          &lt;/ul&gt;
  
        )}
  
  
      &lt;/Droppable&gt;
      &lt;Droppable droppableId=&quot;PickedProperties&quot;&gt;
        {(provided) =&gt; (
          &lt;div ref={provided.innerRef} {...provided.droppableProps} className=&quot; w-96 h-44 border-2 border-cyan-600 flex justify-center items-center&quot;&gt;
            {provided.placeholder}
  
          &lt;/div&gt;
        )}
  
      &lt;/Droppable&gt;
  
    &lt;/div&gt;}
    &lt;/div&gt;
      
    );
  };
  
  export default Properties;
  </code></pre>
  <p>And here where I'm trying to implement the drop functionality :</p>
  <pre><code>import Aside from &quot;../Aside/Aside&quot;;
  import Header from &quot;../Header/Header&quot;;
  import { useEffect } from &quot;react&quot;;
  import { Outlet } from &quot;react-router-dom&quot;;
  import { DragDropContext, DropResult } from &quot;react-beautiful-dnd&quot;;
  import useMetadata from &quot;../../hooks/useMetadata&quot;;
  import { queryClient } from &quot;../../main&quot;;
  interface Props {
    children?: React.ReactNode;
  }
  const Layout: React.FC = (props: Props) =&gt; {
    
    const {data: metrics}= useMetadata('metrics');
    const {data: dimensions}= useMetadata('dimensions');
    const setMetrics=(metrics:any)=&gt;{
      queryClient.setQueryData('metrics',(metrics)=&gt;{
        // the code responsible for the dropping I guess...
      })
    }
    const onDragEnd=(result:DropResult)=&gt;{
      const {destination, source}=result;
      if(!destination) return;
      if(destination.droppableId===source.droppableId&amp;&amp;destination.index===source.index) return;
      // the code responsible for dropping I guess x2 ....
    }
    return (
      &lt;DragDropContext onDragEnd={onDragEnd}&gt;
        &lt;div className=&quot; box-border p-0 m-0 w-full h-screen overflow-y-hidden flex bg-gray-100  text-gray-700&quot;&gt;
          &lt;Aside /&gt;
          &lt;div className=&quot;w-full&quot;&gt;
            &lt;Header /&gt;
            &lt;main className=&quot;flex justify-center items-center h-full w-full&quot;&gt;
              &lt;Outlet /&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/DragDropContext&gt;
  
    );
  };
  
  export default Layout;
  </code></pre>