如何在Next.js getServerSideProps中用react-query处理多脱水查询

你的问题根源在于创建了两个独立的QueryClient实例，但客户端只hydrate了第一个实例的状态，第二个实例的预取数据根本没被客户端的QueryClient读取到，所以微软授权链接只能在客户端重新发起请求后才拿到数据。

正确实现方式 #

只需要使用单个QueryClient实例管理所有预取请求，统一进行hydration即可：

// 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();
  
  // 并行预取两个请求，提升服务端获取效率
  await Promise.all([
    queryClient.prefetchQuery(['getGoogleAuthUrl'], getGoogleAuthUrl),
    queryClient.prefetchQuery(['getMicrosoftAuthUrl'], getMicrosoftAuthUrl)
  ]);

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

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

  console.log(googleAuthData); // 挂载时立即输出预取数据
  console.log(microsoftAuthData); // 挂载时同样立即输出预取数据
  

  return (
    // 页面内容
  );
}

核心要点 #

• React Query的服务端hydration基于单个QueryClient实例，所有预取的查询缓存都需要存在同一个实例中
• 使用Promise.all并行执行多个预取请求，避免串行等待浪费时间
• 客户端的自定义hooks（useGetGoogleAuthUrl、useGetMicrosoftAuthUrl）会自动匹配查询键，从hydrate后的缓存中读取数据，无需额外修改

关于多请求预取的支持 #

完全支持。React Query本身就设计了支持批量预取多个查询，只要所有预取操作都基于同一个QueryClient实例，最后统一导出dehydrated状态即可。

内容的提问来源于stack exchange，提问作者Idris