How to setQueryData without exact key

[YassienW]

According to #394, query key was changed to be exact by default. Is there a way to not match a query key exactly when using setQueryData?

[TkDodo]

no, when you call setQueryData, the value that you pass in will be set for the given key. I'm not sure how that should work fuzzily, as it doesn't care about existing entries in the cache

[TkDodo]

I just had this use case as well when updating a list query where I have multiple cache entries due to filters, and this is what I’ve come up with:

queryClient
  .getQueryCache()
  .findAll(['partial', 'key'])
  .forEach(({ queryKey }) => {
    queryClient.setQueryData(queryKey, newData)
  })

[YassienW]

Thanks for sharing. I ended up getting rid of the key array, but i'm sure this will come up again since having filters in a query key is pretty common. I do think there should be support for this in the api

[TkDodo]

I might add it since it’s just 3 lines :)

[villesau]

There seems to be now even easier way: setQueriesData

[Rc85]

With setQueriesData, setQueryData is redundant.

[bartvanandel]

There seems to be now even easier way: setQueriesData

Unfortunately, the updater function in setQueriesData doesn't currently have access to the exact query key. This makes it hard to update e.g. filtered queries where the filter is part of the query key.

Illustrated (pseudo code):

// Somewhere in a component
const filteredItems = useQuery({ queryKey: ['itemsByState', { state: ['state1', 'state2'] }], ... })
const moreFilteredItems = useQuery({ queryKey: ['itemsByState', { state: ['state1', 'state3'] }], ... })

// Potentially somewhere else
const updatedItem = { ...filteredItems[0], state: 'state3' }

queryClient.setQueriesData({ queryKey: ['itemsByState'], exact: false }, (prev) => {
  // Which filtered items are we updating here? Can't tell!
})

Current function and type definitions:

setQueriesData<TQueryFnData>(queryKey: QueryKey, updater: Updater<TQueryFnData | undefined, TQueryFnData | undefined>, options?: SetDataOptions): [QueryKey, TQueryFnData | undefined][];
setQueriesData<TQueryFnData>(filters: QueryFilters, updater: Updater<TQueryFnData | undefined, TQueryFnData | undefined>, options?: SetDataOptions): [QueryKey, TQueryFnData | undefined][];

export declare type Updater<TInput, TOutput> = TOutput | DataUpdateFunction<TInput, TOutput>;
export declare type DataUpdateFunction<TInput, TOutput> = (input: TInput) => TOutput; // <-- this is the one

Looking at the existing code, this would actually require modifying setQueryData, functionalUpdate, and probably others too, but having access to the full queryKey in the updater function would be very beneficial (either as the second argument, or as a property of the second argument, so adding more items than queryKey wouldn't constitute a breaking change in the future).

@TkDodo would this be something you'd consider? For the moment, we'd have to resort to the query key iteration you wrote in an earlier comment.

[TkDodo]

I'm not sure I understand the problem. Given that filteredItems and moreFilteredItems have the same structure, what I would do is try to find the item to update in all matching entries and update that one. If the item I'm updating exists in more than one entry, it would get updated in all of them. Isn't that what we want?

[bartvanandel]

Well, no. state has changed in the item, so it should be removed from filteredItems, and added to moreFilteredItems. But since the updater function has no knowledge of the queryKey, it cannot know this.