NextJS App fetching data continuously and browser hangs

[pdomala]

Hello

I am learning nextjs and trying to use react-query to fetch data. I followed the documentation to fetch posts from jsonplaceholder
Below is my useQuery code block

const { data, isLoading, error } = useQuery({
        queryKey: ['posts'],
        queryFn: async () => {
            const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
            const data = await response.data;
            return data;
        },
    });

console.log(data);
console.log(isLoading);

This is my client provider component

'use client';
import { PropsWithChildren, useState } from 'react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const RQClientProvider = ({ children }: PropsWithChildren) => {
    const [client] = useState(() => new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } } }));
    return (
        <QueryClientProvider client={client}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
};

export default RQClientProvider;

I am just trying to load my page and console logging the data from useQuery. The browser console is continuously logging the data and making thr browser hang. Everytime I had to kill the chome process.

I am quite new to react-query. Any help or pointers much appreciated. Thanks

[samhirtarif]

The code apparently looks fine. It would be helpful if you could create a reproduction of this issue on stackblitz or some other platform.

[sahibjotsaggu]

Why are you doing const [client] = useState(() => new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } } })); and not just const client = new QueryClient({ ... });?

[pdomala]

I took the code from one of the examples on TanStack. https://tanstack.com/query/v4/docs/react/examples/react/nextjs
I also tried it without using useState. The result is same.

[2manoj1]

@pdomala check this example code - https://github.com/2manoj1/poc-nextjs-13-react-query

• Nextjs 13+ (Server components and App Dir)
• React Query

[pdomala]

Thanks Manoj, I think the issue was that I was not using the Hydrate component earlier. Once I added that the continuous fetching issue is resolved.