title: React-query + Nextjs using hydration config for SSR doesn't use cached results and always have to wait fetch again
body: <p>I'm trying to use react-query on my nextjs app with SSR/SSG and tried a lot of tutorials. Took <code>hydration</code> config because it seems better than <code>initialData</code> approach.</p>
  <p>Following react-query guide: <a href="https://react-query.tanstack.com/guides/ssr" rel="nofollow noreferrer">https://react-query.tanstack.com/guides/ssr</a> you just have to wrap the app on <code>QueryClientProvider</code> and <code>Hydrate</code> components passing a prop to each one.</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-html lang-html prettyprint-override"><code>const App = ({ Component, pageProps }: AppProps) =&gt; {
    const [queryClient] = useState(
      () =&gt; new QueryClient({ defaultOptions: { queries: { staleTime: 30 * 1000 } } })
    )
  
    return (
      &lt;QueryClientProvider client={queryClient}&gt;
        &lt;Hydrate state={pageProps.dehydratedState}&gt;
          &lt;ReactQueryDevtools initialIsOpen={false} /&gt;
          &lt;ThemeProvider theme={theme}&gt;
            &lt;CssBaseline /&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Hydrate&gt;
      &lt;/QueryClientProvider&gt;
    )
  }
  
  export default App</code></pre>
  </div>
  </div>
  </p>
  <p>To start fetching data with react-query on <code>getServerSideProps/getStaticProps</code> you just instance a new <code>queryClient</code>, execute <code>prefetchQuery</code> and set a prop with <code>dehydrate(queryClient)</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-html lang-html prettyprint-override"><code>export async function getStaticProps() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery&lt;Todo[]&gt;('todos', fetchTodos)
  
    return {
      props: {
        dehydratedState: dehydrate(queryClient),
      },
    }
  }
  
  const Home: NextPage = () =&gt; {
    const { data, isLoading } = useQuery&lt;Todo[]&gt;('todos', fetchTodos)
    console.log(isLoading)
  
    if (isLoading) return &lt;h1&gt;Loading...&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've created a small api that return same data as <a href="https://jsonplaceholder.typicode.com/todos" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/todos</a> but with a <code>setTimeout</code> of 3 seconds. The problem is that everytime i reload or move from one page to another using <code>next/link</code>, it takes 3 seconds to load the page. It indicates that react-query cache is not being used.</p>
  <p>Tried moving the queryClient instance outside getServerSideProps.</p>
  <p>Tried adding staleTime to all queries as my config shows above.</p>
  <p>Only solution i've found was:</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-html lang-html prettyprint-override"><code>export const queryClient = new QueryClient()
  
  export async function getStaticProps() {
    if (!queryClient.getQueryData('todos')) {
      await queryClient.prefetchQuery&lt;Todo[]&gt;('todos', fetchTodos)
    }
  
    return {
      props: {
        dehydratedState: dehydrate(queryClient),
      },
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>But there is no one talking about it and feels like i'm doing it wrong.</p>
  <p>This is my network tab when moving to another page and going back before 30 seconds of my <code>staleTime</code> config and queryClient instanced outside gssp:
  <a href="https://i.stack.imgur.com/9f0ZG.png" rel="nofollow noreferrer">enter image description here</a></p>