title: My useQuery hook is refetching everytime its called. I thought it is suppose to hand back the cache?
body: <p>I'm a little confused here. I thought react-query, when using useQuery will hand back 'cache' n subsequent calls to the same &quot;useQuery&quot;. But everytime I call it it, it refetches and makes the network call.</p>
  <p>Is this the &quot;proper way&quot; to do this? I figured it would just auto hand me the &quot;cache&quot; versions. I tried extending staleTime and cacheTime, neither worked. Always made a network call. I also tried initialData with the cache there.. didn't work.</p>
  <p>SO, I am doing the following, but seems dirty.</p>
  <p>Here is the what I have for the hook:</p>
  <pre><code>export default function useProducts ({
   queryKey=&quot;someDefaultKey&quot;, id
  }){
    const queryClient = useQueryClient();
  
    return useQuery(
      [queryKey, id],
      async () =&gt; {
        const cachedData = await queryClient.getQueryData([queryKey, id]);
  
        if (cachedData) return cachedData;
  
        return await products.getOne({ id })
      }, {
          enabled: !!id
         }
    );
  }
  </code></pre>
  <p>This is initiated like so:</p>
  <pre><code>  const { refetch, data } = useProducts(
        {
          id
        }
      }
    );
  </code></pre>
  <p>I call &quot;refetch&quot; with an onclick in two diff locations.. I'd assume after I retrieve the data.. then subsequent clicks will hand back cache?</p>