New keyEnabled option for useQuery/useInfiniteQuery to clear queryKey when disabling enabled

[phatify]

Maybe we need one more option for useQuery & useInifiniteQuery, this option can help us to get rid of the unnecessary queryKey. For example: With this option when enabled is false, the queryKey should be cleared and not shown in ReactQuery Devtool.

Suggested option:
keyEnabled: (boolean) optional.

Example usage:

const id = undefined;
useQuery({
   queryKey: ['orange'],
   enabled: !!id,
   keyEnabled: !!id, // won't create queryKey cache if id is falsy
})

See below image we can see the queryKey persists as disabled status even if I set enabled to false and cacheTime to 0

[phatify]

@TkDodo thoughts? Is this a viable idea?

[TkDodo]

The misunderstanding here is that you cannot disable a query per se. You can only create a disabled observer. An observer always has to observe a query, so we need to add the query to the cache. You can have multiple observers per query, some can be enabled, and some disabled. We treat the query as disabled as soon as all observers are disabled. A disabled observer just means: This observer will not fetch data on its own, but it will still receive updates if data winds up in the cache by other means.

For example, you can have a disabled observer and still call refetch() on it. Or queryClient.setQueryData. In all those cases, your component will re-render because you have the observer. I think it would be wrong to not show those queries in the devtools.

In case it isn't clear: An observer gets created when you call useQuery.

[phatify]

@TkDodo if we need to add queries to the cache even if it doesn't need the observer is that cache redundant or not?

[phatify]

For example I have my own custom hook that is called in 2 different components:

function useProduct (id) {
    const queryResults = useQuery ({
        queryKey: ['product', id],
        queryFn: () => api.getProduct(id),
        enabled: !!id,
    });

    const deleteProduct = (id) => {
        call api to delete product 
    }

   return { ...queryResults, deleteProduct }
}

In the product detail component i call this hook to get my product data:

const { data } = useProduct(123); // I will now have caching enabled as  ['product', 123]
...

In the other modal product detail component I will also call this hook to add the option to remove the product:

const { deleteProduct } = useProduct(); // I will now have caching enabled as  ['product', null]
...
deleteProduct(123)

As you can see from the above code I am getting caching as ['product', null] even if i don't need to do anything with it, I just need to make one call to delete my product. I don't think the observer will be really helpful in this case.

[phatify]

@TkDodo

[TkDodo]

what's the point of mentioning me a million times? Am I not answering fast enough for your taste?

---

1. there is no need to couple deleteProduct with the hook. I don't know what it is doing, but if it only needs the id, why is it coupled to useProduct ?

2. This might be your use case, but there are others as well. For example:

const { refetch } = useQuery({ queryKey, queryFn, enabled: false })

<button onClick={refetch} />

while I don't think this is a particularly good pattern, it still exists and is something that we support. So I really have trouble understanding why the extra cache entry is such a big trouble for you ...