Optimistic updates across multiple query keys

[ianduvall]

I'm displaying a list of items that can be sorted by items' attributes. This leads to multiple cache keys for different sort values. When making mutations to items, e.g. change the name of the item, my backend doesn't synchronously update the items with those changes (it can take a few seconds) so I need to optimistically update the items across all of the different cache keys. I've tried setQueryData but that doesn't seem to support query filters. Any other ideas on how to achieve this?

[TkDodo]

I usually only optimistically update the one view that the user currently sees, and solve the rest with query invalidation, which is fuzzy.

[babycourageous]

Yeah - it's complex but I think makes sense that for a case like mine that there wouldn't be a catch-all way to update - especially when TS gets involved, heheh. Just too many variables/unknowns at play.

If I get some down time this week i would love to poke around the code. I'll let ya know!

[Myzel394]

I usually only optimistically update the one view that the user currently sees, and solve the rest with query invalidation, which is fuzzy.

How do you fuzzily invalidate the other queries @TkDodo ?

[TkDodo]

it depends on your query key structure. Given:

['todos', { filter: 'all '}]
['todos', { filter: 'open' }]
['todos', { filter: 'done' }]

you can call queryClient.invalidateQueries(['todos']) to target all of them. if you want to exclude the view you are on, you can try to use the predicate filter function.

/edit sorry, even easier: invalidate the inactive ones only:

queryClient.invalidateQueries(['todos'], { type: 'inactive' })

[Myzel394]

@TkDodo Thank you for your answer. I finally figured out, I was using the wrong function, hence the late answer 😅 . One last question: Should I call cancelQueries before calling invalidateQueries? Also, can I use setQueryData fuzzily?

[TkDodo]

Should I call cancelQueries before calling invalidateQueries

happens automatically in v4. In v3, you can pass cancelRefetch to invalidateQueries to re-start any running fetches.

Also, can I use setQueryData fuzzily?

Yes, but if you want to target "all" matching keys, use setQueriesData

[phaux]

I just encountered the same problem.

I have a useQuery(["things"]) but it can also be useQuery(["things", {sortField, sortDirection}]). I have a delete mutation which optimistically removes item from the cache, but it only updates in places which don't use the sorting.

It would be nice if we had something like setQueryData(key, updater, { strict: false })

[TkDodo]

It would be nice if we had something like setQueryData(key, updater, { strict: false })

Maybe something like setQueriesData could be fuzzy similar to invalidateQueries. Recently discussed this behavior with @boschni here: #1725 (comment)

The functional updater would need to be called for every entry, but if they have a different data structure, it will be quite hard to make that typesafe. What don you think @tannerlinsley ?

[phaux]

but if they have a different data structure, it will be quite hard to make that typesafe.

It would be the programmer's job to filter only one type of queries using predicate function:

// optimistically remove todo
queryCache.setQueryData<Todo[]>(
  ["todos"],
  (todos) => todos.filter((todo) => todo.id != removedTodoId),
  {
    strict: false,
    predicate: ({ queryKey }) => queryKey[1] == null || typeof queryKey[1] == "object",
  }
)

[henrikq]

I ran into the same issue, and seemed solved it with a hook as follows:

function useUpdateQueryData(queryKey, updater) {
  const client = useQueryClient();
  return newData => {
    const cache = client.getQueryCache();
    cache.findAll(queryKey)
      .forEach(query => 
        client.setQueryData(query.queryKey, oldData => updater(oldData, newData))
      );
  };
}

It makes use of cache.findAll to get all of the specific queryKeys.

It would be nice to have something like a bit more supported out of the box though. There are good suggestions in this thread.

[shaimaHamila]

You can use setQueriesData to update multiple cache entries synchronously at the same time, you can filter the cache entries by partial keys to update the ones you need

I ran into the same issue, and seemed to solve it with a hook as follows:

`export const useCreateEquipment = () => {
const queryClient = useQueryClient();
return useMutation<ApiResponse<Partial>, Error, Partial>({
mutationFn: async (newEquipment: Partial) => {
const { data } = await api.post<ApiResponse<Partial>>("/equipment", newEquipment);
return data;
},
onSuccess: (newEquipmentRes) => {
notification.success({
message: "Equipment created successfully",
});

  const previousQueries = queryClient.getQueriesData<ApiResponse<Equipment[]>>({
    queryKey: ["equipment/fetchEquipments"],
  });
  // Optimistically update each query's data
  previousQueries.forEach(([queryKey, oldData]) => {
    if (oldData) {
      queryClient.setQueryData<ApiResponse<Partial<Equipment>[]>>(queryKey, {
        ...oldData,
        data: [...(oldData?.data || []), newEquipmentRes.data as Partial<Equipment>],
      });
    }
  });
},
onError: (error: any) => {
  notification.error({
    message: "Error",
    description: error.response?.data?.message || "Error",
  });
},

});
};`