[bug]: useInfiniteQuery with "next": "13.5.1" and above (using app dir and server actions), `fetchStatus` status is always `fetching` (after next fetchNextPage call) when navigating via next.js <Link /> to dynamic route, then coming back via browser back button

[VladSez]

Describe the bug

Hello, thanks for a wonderful library

I am using useInfiniteQuery from @tanstack/react-query with next.js and app dir and server actions to implement infinite loading pattern.

Starting from "next": "13.5.1" I experience a bug, when navigating to dynamic route via next.js Link and coming back via browser back button

I found that after browser back navigation from dynamic route and second call to fetchNextPage while scrolling, fetchStatus is stuck in status fetching as well as isFetchingNextPage and isFetching are both stuck in true (please, check the attached video)

// in useEffect

// this was working before "next": "13.5.1" (in next: 13.4.19)  now, has a described above bug
if (inView && hasNextPage && !isFetchingNextPage) {
    console.log("fetching next page!!!!!!!!!!!!!!!!!!");
    void fetchNextPage();
}

// to make it work in "next": "13.5.1" and above we need to remove `isFetchingNextPage` check
// this will work, but this is not optimal
// if (inView && hasNextPage) {
//   console.log("fetching next page!!!!!!!!!!!!!!!!!!");
//   void fetchNextPage();
// }

I think the issue could be in next.js server actions or app dir, because seem's like root page is getting rerendered on the server after navigating back via browser button and then calling server action (check video and server console), so not sure if this @tanstack/react-query or next bug

If we downgrade next to 13.4.19 everything works as expected
Also if I just scroll the page without navigating to dynamic route via next js Link and not using browser back button to return back, everything works as expected

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/nextjs-bug-13-5-4-forked-r4zfnj?file=%2Fapp%2Fcharacters.tsx%3A1%2C1

Steps to reproduce

1. Go to root page
2. Click on any link
3. Navigate back via browser button
4. Scroll down to the end of the page (first call to fetchNextPage should be good)
5. Scroll further
6. Notice that page is stuck with "Fetching next page..." message

Also, please, check the attached video

Expected behavior

isFetchingNextPage prop should have a correct info

How often does this bug happen?

Every time

Screenshots or Videos

Screenshare.-.2023-10-13.12_27_16.AM.mp4

Platform

Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023

Browser: Google Chrome Desktop Version 117.0.5938.152 (Official Build) (64-bit)

Tanstack Query adapter

react-query

TanStack Query version

v4.36.1

TypeScript version

5.2.2

Additional context

I found that if i am not using infinite loading pattern (use effect + intersection observer) and use a button with onClick to append next page data to the list, seems like the issue is gone, so could be that something is wrong with my code or useEffect in app dir

[TkDodo]

what makes you think this is a react-query bug if an upgrade in nextJs made the bug appear?

[VladSez]

I thought it's good for the community and the maintainers to be aware of this issue, also I created a ticket in next repo vercel/next.js#56811

[JordanWeatherby]

We're seeing this same issue with useQuery after upgrading to next 13.5.x - the requests finish but the isLoading returned from the hook continues to be stuck on true

[mertafor]

I posted this on Nextjs issues as well since this might be related to Nextjs, server actions or React query : vercel/next.js#56811

I'm having the same issue. I've been using server action as my fetcher (I'm not sure if it's same for standard fetch as well).

I've been able to resolve this problem by setting RQ's enabled option false initially then setting it enabled during hydration. Otherwise useQuery gets stuck in fetching status. Of course this is not an ideal solution and an official solution would be much appreciated. I'm using Nextjs 14.0.3 and tried this on React Query 4.x and 5.x, currently using the latest version.

//fetcher 
"use server" 
const getPosts= async () => {
  return [{id:1}]
}

// Page
export default async function Page({ params }: iPageParams) {
  const posts = await getPosts(); // server action

 return <ClientPage initialData={posts} />
}

"use client"
export const ClientPage = ({ initialData }) => {
const [queryEnabled, setQueryEnabled] = useState(false);
  useEffect(() => {
    setQueryEnabled(true);
  }, []);

  return useQuery({
    queryKey:['posts'],
    initialData: initialData ?? undefined,
    queryFn: ()=> getPosts(),
    refetchOnMount: initialData ? false : true,
    enabled: queryEnabled,
  });

[TkDodo]

since there is a reproduction in vercel/next.js#56811 that doesn't involve react-query, I would say this is entirely up for nextJs to fix.