Optimistic Updates with Multiple Cache Keys in TanStack Query
Hi everyone! 👋
I'm working on a feature to fetch and display a list of equipment items. The query supports pagination and filtering, which results in dynamic query keys (e.g., ["equipment/fetchEquipments", pageSize, page, serialNumber, conditions]).
When I perform a mutation (e.g., deleting or updating an item), the backend takes a few seconds to synchronize the changes. In the meantime, I need to optimistically update the cached data across all dynamic query keys to ensure the UI reflects the latest state.
Here’s what I’ve implemented so far:
setQueryData: Works well for a specific query key but doesn't support filtering or targeting multiple dynamic keys.
Invalidating Queries: Leads to unnecessary refetching, which I'd like to avoid for better performance.
Example Code:
export const useFetchEquipments = ({ pageSize, page, serialNumber, conditions }: FetchEquipmentsRequest) => {
return useQuery<ApiResponse<Equipment[]>>({
queryKey: ["equipment/fetchEquipments", pageSize, page, serialNumber, conditions],
queryFn: async () => {
const { data } = await api.get<ApiResponse<Equipment[]>>("/equipment/all", {
params: { pageSize, page, serialNumber, conditions },
});
return data;
},
staleTime: 5 * 60 * 1000,
});
};
3 Replies
optimistic-gold•9mo ago
https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#via-the-cache could you try this? update in
onMutate?Optimistic Updates | TanStack Query React Docs
React Query provides two ways to optimistically update your UI before a mutation has completed. You can either use the onMutate option to update your cache directly, or leverage the returned variables...
optimistic-gold•9mo ago
setQueryData shoud be immediate
And an invalidation once you finish the mutation, so it'll do a refetch, shouldn't be that bad
small price to keep things in syncoptimistic-gold•9mo ago
There is https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientsetqueriesdata for setting multiple queries at once
QueryClient | TanStack Query Docs
QueryClient The QueryClient can be used to interact with a cache: tsx import { QueryClient } from '@tanstack/react-query' const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime:...