CODEWITHSUNDEEP
reactjsnext.jsreact-query
ASCode94
ASCode94

Reputation: 15

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

I've built this simple project with react-query and nextjs , after running the project it gives me this error in the console, what did i do wrong ?!

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'
....

the _app.js file:

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

const queryClient = new QueryClient();

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

export default MyApp;

my custom hook:

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

and my index.js file

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

here is the repo for the source code: https://github.com/ascode94/next-simple-fetching

Upvotes: 0

Views: 1586

Answers (1)

TkDodo
TkDodo

Reputation: 28803

There is a browser extension that tries to serialize everything that is in react context to json, i think it’s: https://chrome.google.com/webstore/detail/react-context-devtool/

So it tries to serialize the queryClient and that fails. Disabling it or excluding the ReactQueryClientProvider (if possible) should fix this

Upvotes: 1

Related Questions