Query that returns undefined is stuck in a fetching loop when used in child and parent component

[philipfeldmann]

Describe the bug

I just want to mention that I'm aware of the fact that undefined is no longer an allowed value for query results, but I think the behavior that results form that is still weird:

When having a parent component that uses a custom query hook that has a child which uses the same query hook and this hook returns undefined, the query will fetch over and over again, potentially resulting in thousands of requests.

Here's an example hook:

export const useUndefinedQuery = () => {
 return useQuery(["some-query"], async () => {
 // This would be an api call
 await new Promise((resolve) => setTimeout(resolve, 100));
 return undefined; // the result from the API call might be undefined
 });
};

Please refer to my codesandbox example for a full example.

Your minimal, reproducible example

https://codesandbox.io/s/angry-benji-cc036g?file=/src/index.js

Steps to reproduce

1. Open the console of codesandbox
2. Click on the button "Break Stuff" Button
3. The query will fetch over and over again - watch the console logs as the query has a console.log side-effect

Expected behavior

As a user, I expect the query to only load once. I understand that undefined is no longer a valid result of useQuery, but this infinite loop can lead to high costs when using services such as firebase, where undefined is returned regularly.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• macOS
• Chrome 109.0.5414.119

TanStack Query version

^4.22.0

TypeScript version

^4.6.4

Additional context

No response

[Foxeye-Rinx]

I guess I got the same. I was trying to delay the checkAuth until I got the _token, on initialLoading I show a loading screen and sometime it get stuck on that screen.
The devtool indicates that the status is still fetching but actually I got the response already:

 const {
 isInitialLoading,
 isError,
 error,
 } = useQuery({
 queryKey: ['auth'],
 queryFn: () => checkAuth(_token),
 refetchOnWindowFocus: false,
 enabled: _token?.length > 0,
 retry: 0
 }); 

TanStack Query version: 4.24.4

[TkDodo]

I understand that undefined is no longer a valid result of useQuery

Well, it's not allowed, so it won't work? "Not allowed" should be pretty clear. Like, you can't call null.toString() because it's "not allowed", as in, it won't work.

If you return undefined, we put the query in error state, so when the child mounts it, it goes back to hard loading state, which makes the parent unmount the child, and this repeats ad infinitum.

lead to high costs when using services such as firebase, where undefined is returned regularly.

just because firebase returns undefined doesn't mean you have to return undefined from the queryFn. What does undefined mean? Is it an error? Is it a valid response? React Query doesn't know, but you do. So:

const useFireBaseQuery = () => {
 return useQuery({
 queryKey: ['my', 'key'],
 queryFn: async () => {
 const data = await fetchFromFireBase('...')
 if (typeof data === 'undefined') {
 return null // or throw new Error, idk...
 }
 return data
 }
 })
}

[philipfeldmann]

Hi @TkDodo,
thank you for the detailed response! I totally understand that this is expected behavior. I also understand that we do not have to return undefined just because firebase does so. However, this is very prone to human error. Is there maybe a way to prevent this from being allowed using typescript, so that this would fail at build time?

[TkDodo]

yeah we tried to have typescript types that enforce this, but had to give up due to false positives and settled on the runtime warning / error. maybe we should look into it again, or maybe you'd like to?

[Foxeye-Rinx]

Sound like useEffect dependency array in a custom hook problem. The react team's solution is to use linter to avoid missing Reactive values in the dependency array. The linter rule name is "react-hooks/exhaustive-deps".

In useEffect they check the dependency array.
In useQuery, I guess we can check the return value with the linter and avoid head-scratching by adding more enforcement to the implementation.

[TkDodo]

@Foxeye-Rinx it's nothing like that. I explained why it happens in the comment before:

If you return undefined, we put the query in error state, so when the child mounts it, it goes back to hard loading state, which makes the parent unmount the child, and this repeats ad infinitum.

[Foxeye-Rinx]

Hi, I understand why it repeats infinitely, I mean the prone to human error problem could be solved with the linter rule like the way react team avoids dev mistakes when using useEffect

[sunnysani]

I know it's 2026. But it happens because when you are loading, you're not rendering the Component. So when the query is completed, you then rendering the Component which calls the query and sees that the query has no value yet, so it tries to call for the value.

So there are solutions:

1. Add the loading state in the child
2. When data error, don't render component