title: React Query with server side rendering using Next.js
body: <p>I am trying to use react-query with nextjs to prefetch query on server. It works for the initial query which gets a list of items. However when I try to fetch each item inside component it only fetches it on the client side.</p>
  <pre class="lang-js prettyprint-override"><code>export default function Home() {
    const { data } = useQuery(&quot;pokemons&quot;, fetchPokemons);
    return (
      &lt;&gt;
        &lt;div&gt;
          {data.map((pokemon) =&gt; (
            &lt;Pokemon key={pokemon.name} pokemon={pokemon}/&gt;
          ))}
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export async function getStaticProps() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery('pokemons', fetchPokemons)
    const fetchedPokemons = queryClient.getQueryData()
    //query each pokemon
    fetchedPokemons.forEach(async (pokemon) =&gt; {
      await queryClient.prefetchQuery(pokemon.name, () =&gt; fetchPokemon(pokemon.url))
    });
  
    return {
      props: {
        dehydratedState: dehydrate(queryClient),
      },
    }
  }
  </code></pre>
  <p>And here is code for the component which also queries each item.</p>
  <pre class="lang-js prettyprint-override"><code>const Pokemon = ({pokemon}) =&gt; {
    
    const {data} = useQuery(pokemon.name, () =&gt; fetchPokemon(pokemon.url))
    // logs only in browser, on server it is undefined
    {console.log(data)}
    return (
      &lt;div&gt;
        &lt;h3&gt;
          Name - {data.name}
          &lt;/h3&gt;
          &lt;h4&gt;Base XP - {data.base_experience}&lt;/h4&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Can you please tell me what am I doing wrong that the query doesn't execute on server or is it an issue of the library itself?</p>