queries stuck on loading state in Next.js layout.tsx

[terlan4]

Describe the bug

I am using Clerk for auth, Next.js layout.tsx, TanStack query.

When user gets redirected from /sign-in to /app/**, the queries inside of layout.tsx hangs on fetching/loading state and never finishes. (When user directly opens /app/**, everything works fine.)

(((if the same query (with the same query key) is used in both layout.tsx and page.tsx file as well, then it affects that as well, so that query will keep hanging.)))

This is my patch solution in layout.tsx component to prevent this. But I believe I should follow some correct patterns for not having this issue at the first place. I would be grateful if you can guide on that

repository link: https://github.com/tommy-typos/narudo (ProjectsList component in /src/app/app/layout.tsx file)

Your minimal, reproducible example

https://github.com/tommy-typos/narudo

Steps to reproduce

The first way to reproduce: open /, click on "Go to the app" button,

The second way to reproduce: open /sign-in or /sign-up which then Clerk itself will redirect to /app/**

Expected behavior

Problem happens only with the queries inside of layout.tsx components, queries inside of page.tsx components works correctly.

But if the same query (with the same query key) is used in both layout.tsx and page.tsx file as well, then it affects that as well, so that query will keep hanging.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

macos m1 macbook pro chrome 123.0.6312.22 next: 14.2.3. tanstack query: 5.36.2

Tanstack Query adapter

react-query

TanStack Query version

5.36.2

TypeScript version

5

Additional context

No response

[TkDodo]

is the issue clerk related or redirect related?

• if it's only reproducible with clerk - please file an issue with clerk
• if it's because of a redirect, please create a reproduction that does a redirect without clerk.

thanks

[TkDodo]

issue is not related to clerk at all. layout.tsx file queries just gets stuck when page redirect from external source.

Then why are you having problems with a reproduction that does a redirect without clerk?

you could it by running the project with clerk set

I don't have a clerk account or use clerk so no, I cannot. The point of a minimal, standalone reproduction is to prove that the issue is really with react-query and that addressing it here will actually fix it.

For example, We've had issues filed the past with a create-t3-app reproduction and it turned out the issue was a NextAuth context provider at the top:

• https://github.com/TanStack/query/issues/5335#issuecomment-1542399130

So forgive me if I'm skeptical to invest my time into chasing something that may or may not be a problem with React Query. For all I know, it could also be a bug in NextJs.

i couldnt reproduce without clerk(external) redirect.

My point exactly