React-Query 和 NextJS 获取数据将循环结构转换为 JSON 错误

Question

我用 react-query 和 nextjs 构建了这个简单的项目，在运行项目之后它在控制台中给我这个错误，我做错了什么？！

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'QueryClient'
    |     property 'queryCache' -> object with constructor 'QueryCache'
    |     property 'queries' -> object with constructor 'Array'
    |     ...
    |     index 0 -> object with constructor 'QueryObserver'
....

_app.js 文件：

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;

我的自定义挂钩：

import axios from "axios";
import { useQuery } from "react-query";
async function fetchUserData() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/users");
  return res;
}

export function useUserData() {
  return useQuery("userData", fetchUserData);
}

和我的 index.js 文件

import { useUserData } from "../hooks/useUserData";
export default function Home() {
  const { data, isLoading, error } = useUserData();
  const users = data?.data;
  console.log("userData", data);
  return (
    <div>
      {isLoading && <div>Next is Loading ...</div>}
      {users?.map((user) => (
        <div key={user.email}>
          <div>{user.name}</div>
          <div>{user.username}</div>
          <div>{user.email}</div>
        </div>
      ))}
    </div>
  );
}

这里是源代码的 repo： https://github.com/ascode94/next-simple-fetching

Answer 1

有一个浏览器扩展试图将 React 上下文中的所有内容序列化为 json，我认为它是：https://chrome.google.com/webstore/detail/react-context-devtool/

因此它尝试序列化 queryClient 但失败了。禁用它或排除 ReactQueryClientProvider（如果可能）应该可以解决这个问题

React-Query 和 NextJS 获取数据将循环结构转换为 JSON 错误

React-Query and NextJS Fetching Data Converting circular structure to JSON Error

reactjs

next.js

react-query