我将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
  );
}

我如何让它像它应该工作的那样工作.难道不能在getServerside Props中使用Reaction-Query水合方法发出多个请求吗?

提前谢谢你了

推荐答案

您只需使用相同的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)
])

Javascript相关问答推荐

如何获取转换字节的所有8位?

如何在使用fast-xml-parser构建ML时包括属性值?

如何禁用附加图标点击的v—自动完成事件

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题?

无法读取未定义错误的属性路径名''

覆盖TypeScrip中的Lit-Element子类的属性类型

400 bad request error posting through node-fetch

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

DOM不自动更新,尽管运行倒计时TS,JS

Puppeteer上每页的useProxy返回的不是函数/构造函数

JS Animate()方法未按预期工作

在D3条形图中对具有相同X值的多条记录进行分组

在不扭曲纹理的情况下在顶点着色器中旋转UV

在JS/TS中将复杂图形转换为数组或其他数据 struct

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态

在高位图中显示每个y轴系列的多个值

JavaScript:多个图像错误处理程序

验证Java脚本函数中的两个变量

为什么我的InDesign Java脚本不能完全工作?