title: How to invalidate cache with React query v3?
body: <p>I have read react-query documentation regarding query invalidation. However, it doesn't seem to work for me. Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import ax from "axios";
  import { useQueryClient, useQuery } from "react-query";
  
  export default function App() {
    const queryClient = useQueryClient();
    const [poke, setPoke] = React.useState("pikachu");
    
    const getPokemon = async (id) =&gt; {
      try {
        const pokemon = await ax.get("https://pokeapi.co/api/v2/pokemon/" + id);
        return pokemon;
      } catch (err) {
        throw new Error();
      }
    };
  
    const { data, isLoading, isError } = useQuery(
      ["get-pokemon", poke],
      () =&gt; getPokemon(poke),
      { cacheTime: 100000000 }
    );
  
    const getGengar = () =&gt; {
      ax.get("https://pokeapi.co/api/v2/pokemon/gengar").then((res) =&gt; {
        queryClient.invalidateQueries("get-pokemon");
      });
    };
  
    return (
      &lt;&gt;
        {isLoading &amp;&amp; "loading"}
        {isError &amp;&amp; "error"}
        {data &amp;&amp; data.data.id}
        &lt;button onClick={() =&gt; setPoke("pikachu")}&gt;search pikachu&lt;/button&gt;
        &lt;button onClick={() =&gt; setPoke("ditto")}&gt;search ditto&lt;/button&gt;
        &lt;button onClick={() =&gt; getGengar()}&gt;search gengar&lt;/button&gt;
      &lt;/&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>So the function <code>getGengar()</code> should invalidate the query &quot;get-pokemon&quot;. I should see a loading state when pressing the &quot;get pikachu&quot; button again. But it behaves like the cache is still valid. How to fix this?</p>