How to handle multiple dehydrated queries using react-query in next JS getServersideProps

Question

I am using react-query in conjunction with Next JS getServerSideProps to fetch data before a page loads using the hydration method specified in the docs like this:

// Packages
import { dehydrate, QueryClient } from '@tanstack/react-query';

// Hooks
import { useGetGoogleAuthUrl, useGetMicrosoftAuthUrl } from '../hooks/auth';
import { getGoogleAuthUrl, getMicrosoftAuthUrl } from '../hooks/auth/api';

export async function getServerSideProps({ req, res }) {
  const queryClient = new QueryClient();
  const microsoftAuthQueryClient = new QueryClient(); // Not working
  
  await queryClient.prefetchQuery(['getGoogleAuthUrl'], getGoogleAuthUrl);
  await microsoftAuthQueryClient.prefetchQuery(['getMicrosoftAuthUrl'], getMicrosoftAuthUrl); // Not working

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
      dehydratedMicrosoftAuthState: dehydrate(microsoftAuthQueryClient), // Not working
    },
  };
}

export default function Signin() {
  const date = new Date();
  const { data: googleAuthData } = useGetGoogleAuthUrl();
  const { data: microsoftAuthData } = useGetMicrosoftAuthUrl();

  console.log(googleAuthData); // logs actual data on mount and data is immediately available
  console.log(microsoftAuthData); // logs undefined before eventually logging data after being successfully fetched with the useGetMicrosoftAuthUrl() query
  


  return (
    //Page content
  );
}

How do I make it work as it is supposed to work. Is it not possible to make multiple requests in getServersideProps using react-query hydration method?

Thank you so much in advance

Yes it's possible. I think you only need to create one instance of QueryClient in getServerSideProps. After all, you only need one instance of QueryClient per request. — ivanatias
– ivanatias, Commented Sep 15, 2022 at 19:06

TkDodo · Accepted Answer · 2022-09-18 07:36:12Z

7

You would just use the same queryClient and prefetch both queries into it, then hydrate just the one:

export async function getServerSideProps({ req, res }) {
  const queryClient = new QueryClient();
  
  await queryClient.prefetchQuery(['getGoogleAuthUrl'], getGoogleAuthUrl);
  await queryClient.prefetchQuery(['getMicrosoftAuthUrl'], getMicrosoftAuthUrl);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

This however fetches them one after the other, so you might want to await them in Promise.all:

await Promise.all([
  queryClient.prefetchQuery(['getGoogleAuthUrl'], getGoogleAuthUrl),
  queryClient.prefetchQuery(['getMicrosoftAuthUrl'], getMicrosoftAuthUrl)
])

answered Sep 18, 2022 at 7:36

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle multiple dehydrated queries using react-query in next JS getServersideProps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related