isLoading is always return true after go other page 2 too fast (before loading in page 1 success)

[ducyb782001]

Describe the bug

I have page 1 /photos and two useQuery function
const { data: profileDetail } = useQuery({ queryKey: ["userProfile"], queryFn: () => getProfileDetail(), }); const { data: listUserToken, isLoading: isLoadingUserToken } = useQuery({ queryKey: ["listUserToken"], queryFn: async () => { const result = await getListUserToken(); return result; }, });
I hard reload this page and don't wait the query is success => and click to push in page 2

<div onClick={() => { router.push("/photos/1"); }} > Click {isLoadingUserToken ? "Loading..." : "Done"} </div>

In page 2 i will have some other useQuery function
const { data: userExp } = useQuery({ queryKey: ["userExp"], queryFn: () => getUserExp(), }); const { data: profileDetail } = useQuery({ queryKey: ["userProfile"], queryFn: () => getProfileDetail(), }); const { data: userLevel, isLoading: isLoadingUserLevel } = useQuery({ queryKey: ["getUserLevel"], queryFn: () => getUserLevel(), });

And then i don't wait the query success, i click to push page into page 1 (/photos)
<div onClick={() => { router.push("/photos"); }} > Back </div> {isLoadingUserLevel ? <div>Loading....</div> : "Loading done"}

And now, isLoadingUserLevel always return true

Your minimal, reproducible example

https://stackblitz.com/edit/stackblitz-starters-xmhdkt?file=app%2Fpage.tsx

Steps to reproduce

Step 1: Click go to photo Detail
Step 2: Reload page Photo detail and don't wait api loading success
Step 3: Spam click button go to list photo in page PhotoDetail (Dont wait api loading success)
Step 4: When go to List photo, spam again on button go to photo detail

Expected behavior

I expected isLoading work after reload and go to other page fast

How often does this bug happen?

Always when using this step

Screenshots or Videos

Screen.Recording.2024-11-12.at.09.55.34.mov

Platform

• OS: MacOS Monterey 12.7.6
• Chrome: Version 130.0.6723.117 (Official Build) (x86_64)
• NextJs: 14.2.13

Tanstack Query adapter

react-query

TanStack Query version

^4.35.3

TypeScript version

^5

Additional context

No response

[TkDodo]

Thank you for filing this issue, but we need more information before looking into this.

Specifically, a minimal, standalone, runnable reproduction is needed - preferably with codesandbox or stackblitz.

We'll close this issue for now, but we'll certainly re-open it if there is a proper reproduction.

[ducyb782001]

@TkDodo thanks for your reply, i will give you a code sanbox soon. And you can see my video for more infor. Thanks

[ducyb782001]

Hi @TkDodo , Sorry for the slowly response, i already update the stackbliz code example and step to have the bug. Here is my stackbliz link

https://stackblitz.com/edit/stackblitz-starters-xmhdkt?file=app%2Fpage.tsx

[TkDodo]

It’s an interesting race condition. Here’s a fork with v5 + the devtools where it still shows up:

https://stackblitz.com/edit/stackblitz-starters-fuohuu

It goes away when the list query is not used on the details page. I’ll have to look into why that happens.

[TkDodo]

Would be good to know if this is specific to nextJs or if it could be reproduced in other frameworks as well

[parkinjong]

I happened in the "Link" component of nextjs.
If I moved the page before useQuery was done, the same thing happened to me.

https://stackblitz.com/edit/stackblitz-starters-4tjsxt?file=app%2Fpage.tsx

It didn't happen because the page was reloaded when using the 'a' tag.

[TkDodo]

@parkinjong so, to be on the same page: the issue doesn’t show up when router.push is used, but it does show up when a next Link is used ?

[parkinjong]

@TkDodo
When I tested it on stackblitz, router.push and Link look the same