what could cause a query cache value to become undefined?

[thebrengun]

I encountered an error in my app when an optimistic update didn't check to see if prevCache was undefined when applying an optimistic update before a mutation. The app was in a state where the cache should have been populated and not undefined so I'm wondering what are the reasons the query cache could become undefined? I'm using react-query 2.26.4

Some more details: specifically this happened inside of a custom hook I use to apply optimistic updates before a mutation modified from the example docs. It's called useOptimisticMutation and it looks like this:

const useOptimisticMutation = (queryKey, mutate, update) => {
    const qc = useQueryCache();

    return useMutation(mutate, {
        onMutate: (variables) => {
            // cancel any outbound request
            qc.cancelQueries(queryKey);

            const snapshot = qc.getQueryData(queryKey);

            // optimistic update
            qc.setQueryData(queryKey, (prevCache) =>
                update(prevCache, variables)
            );

            // rollback
            return () => qc.setQueryData(queryKey, snapshot);
        },
        onError: (err, id, rollback) => rollback(),
        onSuccess: () => qc.invalidateQueries(queryKey)
    });
};

An error occurs in update when prevCache is undefined and so rollback is not returned and the onError ultimately throws because rollback is not a function.

The mutation is called from a button onClick handler. The button is conditionally rendered if the collection which is being mutated is not isLoading and if the collection is truthy.

The button logic is wrapped up in its own component like:

const MutationButton = (props) => {
    const [ addItem ] = useOptimisticMutation('my-collection', fetchAddItem, optimisticAddItem);

    return <Button onClick={(e) => addItem('new item')}>add item</Button>;
};

And is rendered in a component like

const View = (props) => {
    const { isLoading, isFetching, data } = useQuery('my-collection', fetchItems, { staleTime: 30000 });
    
    if (!isLoading && data) {
        return <MutationButton />;
    }
    return null;
};

Finally, this happened in a private Chrome window which had recently been refocused and may have been refetching the query in the background.

What might be causing prevCache to be undefined in qc.setQueryData? I'd provide a reproducible example in Codesandbox but I only encountered this once. Really I'm looking for a deeper understanding of the queryCache state and what combination of factors might cause an undefined value where there was once a correctly resolved value.

[TkDodo]

What might be causing prevCache to be undefined in qc.setQueryData?

usually one of two things:

• the query key doesn’t match exactly (watch out for numbers and strings)
• Your queryClient is not stable, e.g. because it is create inside your app component. The client holds the cache, so if you create a new one, you discard the cache and create a new one

[thebrengun]

Thanks for the tips! As a separate issue I encountered the second scenario you mentioned dealing with UI that was created by a library that escaped the React tree and couldn't use context.

In this case, the issue was an optimistic mutation handler that required another cache item that was cleared after the default 5 minute expiration. No UI depended on it (aside from the mutation handler) and so it was marked for removal by react-query. It was tricky to figure out because within the 5 minute period everything worked as expected and users would only rarely stay in the view >5 minutes and encounter my bug.

[wootcot]

const queryClient = new QueryClient() <--- Creating this outside of a component fixed the undefined cache issue.

And this is how you create stable queryClient turns out. Thank @TkDodo.