queryFn returning undefined should be cached

[90dy]

Hello there 👋

When using a query that return undefined, the cacheTime and refetch options are not taken into account. It could happen that a call to a server return an undefined value, and we don't want to re-request to prevent too much server-side computations.
We can also want to use useQuery as a better useEffect, that should return nothing.

The workaround is to return something, but it's not really explicit for developer, and is not good for maintainability as not every developer knows about that tricky solution 😭

If it's to know if a cache exists for that query, react-query should use:

For:

const queryCache = {
  [queryKey1]: returnValue1,
  [queryKey2]: returnValue2,
}

const isQueryCache1 = queryKey1 in queryCache

instead of

const isQueryCache1 = queryCache[queryKey] === undefined

That's a DX issue, so what do you think about that ?

Thanks 🙌

[TkDodo]

it's not allowed to return undefined from the queryFn, because undefined is used a kind of special value. for example, when initialData is set to undefined, it means you don't have initialData. If undefined were allowed for successful queries, this wouldn't be representable.

There should also be an error in the console in dev mode:

query/packages/query-core/src/query.ts

Lines 475 to 477 in 35539bf

	console.error(
	`Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ${this.queryHash}`,
	)

[90dy]

data declared means we have data, undefined tells us only data is empty.
Sorry I'm not here to bother you but I'm sure we could do something about this and improve the react-query a little more.
Ofc that's not something urgent.
Thank you for your time 🙏

[TkDodo]

yes, we're about to improve the typescript types so that you get a compile error if you try to return something from the queryFn that is either undefined or a union with undefined.

what's your use-case for having a successful query with undefined data that you cannot model with null instead ?

[90dy]

It was an usage of useQuery to cache calls preventively and not run twice or more like useEffect will do, as the component was used multiple time in the same page:

const Component = () => {
  useQuery([...], () => {
    await execSomeCall1()
    await execSomeCall2()
    await execSomeCall3()
  })
  return (...)
 }

And I didn't understand why it didn't cache the query via the queryKey

It was a temporary code fix because the codebase is dirty.

[TkDodo]

so return null at the ned 🤷

[90dy]

Yes but it's implicit

[alexian-ic]

I actually agree here that it seems odd that undefined has a reserved purpose for signaling internal cache state changes (or non-changes in this case), which means that it can no longer be used to represent the value of the cached item itself.

My use case was to set the cache value to undefined to represent that the value is in fact no longer defined (in our case, it was deleted).

We can and likely will use null (or an empty obj) instead, but these other falsy vals have their own meaning too, so I'm wondering if there's a more graceful solution here longer term.

[TkDodo]

My use case was to set the cache value to undefined to represent that the value is in fact no longer defined (in our case, it was deleted).

remove the cache entry with queryClient.removeQueries