Can I pass null as a query key?

[nandorojo]

I use SWR and I'm considering switching to React Query. Basically everything about react-query seems better so far, except one: null / error keys.

With SWR, you can do this:

const { data: user } = useUser()
const { data: friends } = useSWR(user ? ['user', user.id] : null, fetcher)

With react-query, it seems like you have to just use the enabled prop. However, this does not exactly serve the same function. I want to use a nullable key so that I can keep my typescript types strict.

This is how my code usually looks (illustrative)

const CacheKeys = {
  friends(id: string) {
    type Key = ['user', string]
    const key: Key = ['user', id]

    return key
  }
}

// then in my hook:
const { data: friends } = useSWR(user ? CacheKeys.user(id) : null, fetcher)

I want to ensure that my key has a strict type. Otherwise, I would have to manually set enabled: false and check the conditions of the key. But the conditions can change (it might depend on more than simply user.id in the future.)

With the method described above, I can use the ReturnType of my queryKey in my queryFn.

const Fetchers = {
  friends(...key: ReturnType<typeof CacheKeys['friends']>) {
    return fetchFriends(...)
  }
}

It also allows for a queryKey to be a function, and if that function throws, the query doesn't fire. This is really useful in many cases as well.

[TkDodo]

some time ago, react-query had nullable query keys, but I think with v2 or so, this was changed to the enabled option. I haven't had any typescript issues with it, the preferred way is to use inline functions to avoid query key injection and be explicit about the dependencies:

const useTodo = (id) => useQuery(['todos', id], () => fetchTodo(id))

[phatmann]

I don't understand that. I'm using the enabled prop and never coerce the key to anything...

My scenario was not complete. I am using a query keys factory (thanks for this idea, @TkDodo) and one of the methods takes an ID. The ID is derived from another query and can be undefined, yet the query factory method requires a non-null ID. That is where the coercion comes into play.

(A related alternative is to allow the factory method to take a null ID, and return a blank key [] in response.)

...advantages of the enabled option:

• you can all setQueryData on disabled queries and still update the existing cache entry with it.
• You can also have one enabled and one disabled observer of the same query key.

Great points. I now see the problem with null keys instead of enabled.

A good solution to the type issue would be to let the query key be a function (or a value). Then you could use the non-null assertion operator without getting an exception:

const [filter, setFilter] = useState()
useQuery(() => ['something', filter!], () => fetchSomething(filter), { enabled: !!filter })

[TkDodo]

the problem is that enabled: false only disables the observer, not "the query". If you call refetch, the query will still run. I've shown another way of dealing with this apart from the no-null assertion operator here: https://tkdodo.eu/blog/react-query-and-type-script#type-safety-with-the-enabled-option

[phatmann]

I keep forgetting about refetch even though I mentioned it myself. Grrrrrr.

I have already read all of your blog posts with great interest, they are all excellent. But that particular one does not address how to set up a query factory when IDs can be null. I would like to see your exact solution for that one. Because I am out of ideas that are not unsatisfactory or ineffective in one way or another.

[TkDodo]

But that particular one does not address how to set up a query factory when IDs can be null. I would like to see your exact solution for that one. Because I am out of ideas that are not unsatisfactory or ineffective in one way or another.

I don't really understand the problem, can't we just accept null in the key factory as well?

const queryKeys = {
  todos: ["todos"] as const,
  todo: (id: number | null) => [...queryKeys.todos, id] as const
}

const fetchTodo = (id: number | null) => {
  if (!id) {
    return Promise.reject(new Error("invalid id"))
  }
  return axios.get(...)
}

const useTodo = (id: number | null) => useQuery(
  queryKeys.todo(id),
  () => fetchTodo(id),
  { enabled: Boolean(id) }
)

[phatmann]

Without a valid ID we cannot generate a valid key. By explicitly allowing a null ID, we are making the code harder to reason about just to appease the Typescript compiler. The goal is to convince the compiler that the key will not be accessed unless enabled is true. I have not found a satisfactory implementation of this, but I'm convinced there is one. I'm going to mull it over and hope for a flash of inspiration ⚡️