如何在下一个JS getServersideProps中使用react-query处理多个脱水查询

Question

我react-query与 Next JS getServerSideProps 结合使用，在页面加载之前使用文档中指定的水合方法来获取数据，如下所示：

// 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
  );
}

我如何让它按预期工作。是否无法使用react-query Hydration方法在getServersideProps中发出多个请求？

提前非常感谢

Answer 1

您只需使用相同的 queryClient 并将两个查询预取到其中，然后仅对其中一个进行水合：

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),
    },
  };
}

然而，这会一个接一个地获取它们，因此您可能需要在以下位置等待它们Promise.all：

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