search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.67k stars 2.92k forks source link

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

Open ducyb782001 opened 2 weeks ago

ducyb782001 commented 2 weeks ago

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"}

`

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

{isLoadingUserLevel ?
Loading....
: "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

https://github.com/user-attachments/assets/33bc371b-052c-4136-af00-5bec36063a03

Platform

Tanstack Query adapter

react-query

TanStack Query version

^4.35.3

TypeScript version

^5

Additional context

No response

TkDodo commented 1 week ago

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 commented 1 week ago

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

ducyb782001 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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

parkinjong commented 4 days ago

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 Image

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

TkDodo commented 3 days ago

@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 commented 1 day ago

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