下一个 JS 错误序列化从 getServerSideProps 返回的 .dehydratedState.queries[0].state.data.config.adapter`

Question

我正在尝试使用 react-query 在 Next JS 中获取 getServerSideProps 中的数据，但我一直收到这个奇怪的错误：

Error: Error serializing `.dehydratedState.queries[0].state.data.config.adapter` returned from `getServerSideProps` in "/auth/google/callback".
Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.

这是我的代码：

// Packages
import { useRouter } from 'next/router'
import { dehydrate, QueryClient, useQuery } from 'react-query';

// APIs
import { completeGoogleAuth } from '../../../hooks/auth';

export async function getServerSideProps(context) {
  const queryClient = new QueryClient()
 
  await queryClient.prefetchQuery('completeGoogleAuth', () => completeGoogleAuth(context.query.code));

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

export default function Callback() {
  const router = useRouter();
  const { data } = useQuery('completeGoogleAuth', () => completeGoogleAuth(router.query.code))

  return (
    <>
      Loading
    </>
  )
}

我尝试过使用 JSON.stringify(dehydrate(queryClient))，也尝试过使用 JSON.parse(JSON.stringify(dehydrate(queryClient)))，但其中 none 有效。我能做什么？

Answer 1

我今天偶然发现了同样的错误，JSON.stringify(dehydrate(queryClient)) 或以任何方式序列化 dehydrate(queryClient) 都不会真正起作用，因为你的 completeGoogleAuth 函数返回的对象具有函数值key-value 对，here's a picture of the config object.

如您所知，函数不能 JSON 直接序列化。现在，我假设您对 completeGoogleAuth 提取器函数使用的（或者我也做过的）是使用 Axios 作为您的 API 客户端库。我发现 Axios returns 对象无法 JSON 序列化。作为一种解决方案，我刚刚使用本机 JavaScript fetch() API 来获取 API 数据并且从那时起就没有遇到任何问题。

这是我的获取函数：

export const getScholarshipInfoSSR = async (token) => {
   const response = await fetch(
      process.env.NEXT_PUBLIC_API_BASE_URL + portalRoutes.getScholarshipInfo,
      {
         headers: { Authorization: `JWT ${token}` },
      }
   );

   if (!response.ok) {
      throw new Error("Network response was not ok");
   }
   return response.json().then((data) => ({ data }));
};

这是预取的 useQuery 调用：

await queryClient.prefetchQuery("portal", () =>
         getScholarshipInfoSSR(token)
      );

下一个 JS 错误序列化从 getServerSideProps 返回的 .dehydratedState.queries[0].state.data.config.adapter`

Next JS Error serializing `.dehydratedState.queries[0].state.data.config.adapter` returned from `getServerSideProps

serialization

json

server-side-rendering

next.js

react-query