Infinite loop (browser crashes) in Next 13

[victorbianconi]

Describe the bug

Can't get React Query to work in Next 13 (even on client components). The app crashes totally and if I log the query it's basically looped indefinitely.

Your minimal, reproducible example

Code

Steps to reproduce

1. Just use React Query as normal in a client component.

Expected behavior

It should not loop nor crash. or

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows, Chrome

Tanstack Query adapter

react-query

TanStack Query version

v4.29.12

TypeScript version

No response

Additional context

No response

[TkDodo]

please show a runnable reproduction of your issue, or we'll close this issue.

[victorbianconi]

I don't have an example right now but this is the code. Not sure how to format properly here. If I use the same code in a normal react app, it works. So I assume it must be related to Next.

"use client";

import { useInfiniteQuery } from "@tanstack/react-query";

const fetchGens = async (pageParam) => {
  const response = await fetch("/api/generations/my?pageParam=" + pageParam);
  const data = await response.json(); // Extract the JSON data from the response
  console.log(data);
  return data;
};

export default async function Generations({ gens }) {
  const {
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isFetchingNextPage,
    isFetchingPreviousPage,
    data,
  } = useInfiniteQuery({
    queryKey: ["generations"],
    queryFn: ({ pageParam = 0 }) => fetchGens(pageParam),
    getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
    getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
    onSuccess: (data) => {
      console.log(data)
    },
  });

  return (
    <main className="flex flex-col min-h-[100vh] items-center py-[4rem]">
      {" "}
      <div className="w-[80vw] mobile:w-[90vw] flex flex-col">
        {" "}
        <h1 className="text-3xl text-white font-bold mb-[1.6rem]">
          Generations
        </h1>
        <div className="grid grid-cols-3"> </div>
      </div>
    </main>
  );
}

[TkDodo]

I don't have an example right now

then please create one? Put that code in a codesandbox, and stub out the api request with a Promise.resolve(someJsonData)

It's your job to provide a proper reproduction if you want help from maintainers. There are a ton of things missing that could be done wrongly, like queryClient creation etc. From seeing just that code, I'd say things are fine and it works on my machine ...

[victorbianconi]

Here you go: https://codesandbox.io/p/sandbox/kind-snow-04rdx0
I hope this suffices. The API obviously doesn't work but I noticed it still loops and crashes.
Let me know if this is enough info for you.
edit: nvm, can't get it to replicate. You can close this issue but what do you think can be the reason? My code isn't any different except for the real API call which successfully returns the data (only once). The loop happens on the front-end and no API calls are made after the first (rightly so).

[TkDodo]

Idk but that's exactly the reason why I always demand a reproduction. It's 95% not the libs fault, but something in your surroundings.

[victorbianconi]

Idk but that's exactly the reason why I always demand a reproduction. It's 95% not the libs fault, but something in your surroundings.

I migrated back to Next 12.3.2 and it works just fine. Must have been the latest version from Next.

[Justinfan827]

I don't think you can have client components using the 'async' keyword: facebook/react#26801

[TkDodo]

good catch!