Some queries are just not firing at all, stuck in loading=true state.

[sinclairnick]

Describe the bug

I've run into a fairly curious bug where given N queries intended to run on a given NextJS page, only a subset of these actually run. What's more, the queries that do run, change every time I test it (i.e. it is non-deterministic).

For example when I refresh a page, triggering a full fetch for all the tree's queries, only a subset of the total queries actually get run, leaving the others in a perpetual loading=true state, with data=undefined. When I reload it further, the queries that do/not load vary each time, which makes it difficult to debug, or figure out.

$ pnpm list

# Other packages...
axios 1.1.3                                              
react 18.2.0                           
react-dom 18.2.0                                                                                                                                                              
@tanstack/react-query 4.15.1
@tanstack/react-query-devtools 4.16.0  
next 13.0.3

Code example

const q1 = useQuery({ queryKey: ["q1"], queryFn: () => {/** */}}) // <-- Sometimes this will run
const q2 = useQuery({ queryKey: ["q2"], queryFn: () => {/** */}}) // <-- Sometimes this will run
const q3 = useQuery({ queryKey: ["q3"], queryFn: () => {/** */}}) // <-- Sometimes this will run

Been scratching my head over this for a while now without making any progress or leads, so any help would be much appreciated!

Your minimal, reproducible example

I failed to reproduce this bug in a CodeSandbox

Steps to reproduce

I've tried to reproduce this in CodeSandbox but have failed, so there's clearly some library interaction happening (which isn't helpful for debugging, sorry).

Expected behavior

I expected every query to run upon a reload, but only some are.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: macOS (Silicon)
Browser: Chrome
Version: 107.0.5304.110

react-query version

4.15.1

TypeScript version

4.8.4

Additional context

The description I've provided is quite vague, unfortunately, and I'm really unsure as to what's going on and how to reproduce it. But I thought I'd create an issue in case anyone else was having the same problem.

[TkDodo]

As you've said, there isn't much we can do here without a reproduction. Maybe you can add code to the codesandbox until it behaves like your app, or you remove code from your app until it looks like the sandbox. It's also not clear to me if the queries are running in the browser or on the server (as you've mentioned nextjs).
Also not sure if you're using the experimental app directory of next or the old pages.

We can discuss this because I think it sounds really odd, but it's not something I'd keep as a filed issue. Moving to discussions.

[sinclairnick]

Thanks for getting back so quickly!

It's running in a regular pages/ page (not app) and the behaviour is unchanged whether any SSG is occurring.

Frankly, this problem might be outside of RQ, because I can see some weird stuff in Network, with empty response bodies. I'll have another look tomorrow morning, and will update as to whether its RQ or something else.

Thanks

[TkDodo]

Try replacing the actual network calls with Promise.resolve(someMockData) to rule out the network issues.

[sinclairnick]

Having done that, plus swapping out several different fetch clients, it seems to be an error on the network level. The Network tab shows requests with the warning: Caution: request is not finished yet! indicating either the client is doing too much work or the server is slow. Not sure which one it is, but doesn't seem to be an RQ issue at this point.

[sinclairnick]

UPDATE: Turned out this had nothing to do with React Query (sorry for bothering you with this issue).

The issue was with Network requests hanging, due to a very sneaky server bug. Seemed like RQ played a role since the DevTools e.g. weren't showing some queries that should have been running, but it was the other end of the stack that was problematic.

For posterity, the issue was with an express-session custom store failing to call the callback() function on all branches, causing the non-deterministic behaviour with hanging requests. Pesky callbacks strike again

[sinclairnick]

@TkDodo I appreciate your assistance in any case! Thanks