useQuery not initiating network request suddenly on macOS Ventura 13.4.1 (Apple M1) until restart

[Umeshunp]

Describe the bug

Dear TanStack Query Team,

I hope this message finds you well. I would like to report an unexpected behavior that occurred suddenly with the useQuery hook from the @tanstack/react-query library, version "^4.29.19", on my Apple M1 machine running macOS Ventura version 13.4.1 (22F82).

Description:

While working on my application, I suddenly observed that the useQuery hook was not functioning as expected. The hook kept returning { loading: true } but data was undefined. Moreover, there was no network request being made to the actual API, which I confirmed by checking the Network console in the browser. This behavior occurred suddenly while the useQuery hook was previously working correctly.

Workaround:

I was able to get useQuery to work normally again by restarting my laptop. However, this is not an ideal solution and the root cause of the issue remains unknown.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/github/tanstack/query/tree/main/examples/react/simple?embed=1&file=%2Fsrc%2Findex.jsx%3A26%2C7-28%2C34

Steps to reproduce

Steps to Reproduce:

1. Use @tanstack/react-query library version "^4.29.19" on an Apple M1 machine with macOS Ventura version 13.4.1 (22F82).
2. Utilize the useQuery hook in a React component to fetch data from an API (note: it might be working fine initially).
3. Suddenly observe that useQuery starts returning { loading: true } and data as undefined, without making any network request to the API.
4. Restart the machine.
5. Observe that the useQuery hook begins to work normally again after the restart.

Expected behavior

Expected Behavior:

The useQuery hook should consistently initiate a network request to the desired API and return the data when available.

How often does this bug happen?

Only once

Screenshots or Videos

No response

Platform

Environment:

• Device: Apple M1
• OS: macOS Ventura
• OS Version: 13.4.1 (22F82)
• Library: @tanstack/react-query
• Library Version: "^4.29.19"
• "axios": "^1.4.0",

Tanstack Query adapter

react-query

TanStack Query version

"@tanstack/react-query": "^4.29.19",

TypeScript version

"typescript": "^4.9.5",

Additional context

Additional Information:

This issue appeared suddenly during normal usage, and I did not make any changes to the code or environment that would explain this behavior. It's unclear what may have caused the issue, and why a restart resolved it.

I would greatly appreciate it if your team could investigate this issue to identify the root cause and potentially provide a fix or recommendations on how to prevent this behaviour in the future.

Thank you for your attention to this matter.

[sahibjotsaggu]

Very peculiar.. I'm having this issue right now too. I'm on Apple M2 Ventura 13.4.1.

Here is my minimal, reproducible example: https://codesandbox.io/s/debouncedmutation-example-t2t4x4?file=/src/App.tsx

For more context, I'm working in VS Code in my repo but I created that sandbox to try something on the side.
Today, when I loaded up VS Code again, my useQuery in an untouched component didn't fire the queryFn (Adding a debugger inside queryFn proved that).

EDIT: I'm also on version ^4.29.19 of @tanstack/react-query
Confirmed: Restarting computer does fix this.

[TkDodo]

Please have a look at what the fetchStatus returned by useQuery is. If it's in 'paused' state, it means there is no network connection.
We've seen bugs in the past where chrome on macos sometimes falsely reports that you have no network connection.

[sahibjotsaggu]

Ah yes, it was in the "paused" state. Restarting computer fixed the issue!

[Umeshunp]

Please have a look at what the fetchStatus returned by useQuery is. If it's in 'paused' state, it means there is no network connection. We've seen bugs in the past where chrome on macos sometimes falsely reports that you have no network connection.

Normal axios API call was working that time only useQuery failing. queryFunction was not getting called.

[Umeshunp]

Ah yes, it was in the "paused" state. Restarting computer fixed the issue!

yes this issue is strange. The same issue I observed on prod environment at the same time. To cross verify i accessed the application on my android phone chrome browser it was working there.

[TkDodo]

We check navigator.onLine to see if network connection is available. chrome on mac has some known bugs in that area:

https://bugs.chromium.org/p/chromium/issues/list?q=navigator.online

you can use a different networkMode, e.g. offlineFirst to fire at least one request without checking for network connectivity first.

[Umeshunp]

We check navigator.onLine to see if network connection is available. chrome on mac has some known bugs in that area:

https://bugs.chromium.org/p/chromium/issues/list?q=navigator.online

you can use a different networkMode, e.g. offlineFirst to fire at least one request without checking for network connectivity first.

Thank you @TkDodo At least the networkMode: offlineFirst option will save us in this kind of situation.

[MR-BH]

We check navigator.onLine to see if network connection is available. chrome on mac has some known bugs in that area:

https://bugs.chromium.org/p/chromium/issues/list?q=navigator.online

you can use a different networkMode, e.g. offlineFirst to fire at least one request without checking for network connectivity first.

Same problem, networkMode: offlineFirst works!

[TkDodo]

shipped a workaround to v5 alpha. Not happy about it because it can lead to worse experiences for offline first apps, but navigator.online is so broken I don't want to keep using it :/

[juanvilladev]

Experiencing the same issue on M1 Pro Mackbook Pro. Ventura 13.4.

Restarting computer resolved issue as well.

[bekharsky]

Will this v5 fix be backported to v4?

[TkDodo]

no because it's a breaking change in behaviour

[KonradLinkowski]

@TkDodo is there an option which tells the query client to ignore navigator.onLine entirely and not only on the first request?

[TkDodo]

yes, that's what v5 is doing.