Endless reloading when using useQuery in Next.js 14

[baydisng13]

After integrating @tanstack/react-query into a Next.js 14 application, whenever using the useQuery hook to fetch data, the page gets stuck in an endless reloading loop.

Steps to Reproduce

1. Create a Next.js 14 application (app router)
2. Integrate @tanstack/react-query.
3. Use the useQuery hook to fetch data within a component.
4. Run the application and observe the behavior.

Expected Behavior

The page should render normally without entering into a reloading loop when using useQuery.

Actual Behavior

The page gets stuck in an endless reloading loop when using useQuery.

Reproducible Demo

import { useQuery } from '@tanstack/react-query'
import axios from "axios";

async function getBusinessFn() {
  return (await axios.get(`/business/`)).data;
}

export default function Home() {
  const result  = useQuery({ queryKey: ['todos'], queryFn: getBusinessFn })
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
    </main>
  );
}

Environment

• Next.js Version: 14.1.4
• @tanstack/react-query Version: 5.28.9
• Operating System: windows
• Browser: Edge, Mozilla
• Node.js Version: v20.10.0

[TkDodo]

please show a minimal reproduction with codesandbox or stackblitz. we have integration tests for next14 and 15

• https://github.com/TanStack/query/tree/9b6bfb4abca3a69fced6c70573be70347e780b9b/integrations

[Tonyibra]

any updates? cz im facing the same issue

[TkDodo]

there’s no update on a reproduction from anyone so far. maybe you can provide one?

[baydisng13]

From my side I updated the project setup and it work. I was trying to use tanstack query from server side. And the way I created the query client instance was not correct. so I used the basic way of setting up tanstack query and it work. I think I didn't understand the way to initialize the query client that's why.