Updating query data without access to complete query key

[opal pollen]

Assume the following scenario:
I have two screens:
Screen1: queries server for restaurants and displays them in a list( favorited restaurants have a heart icon displayed in the ui)
Screen2: displays a single restaurant where the user can toggle the favorite state

The query for the restaurants query looks like the following:

   const { isLoading, error, data } = useQuery(['restaurants', longitude, latitude], () =>
        // Fetching logic
     )
   )

In the query, I add the longitude and latitude in the query key, sincy in my application these can change and I want to make sure the restaurants list is updated according to it.

My issue is that when a user favorites/unfavorites and I want to mutate the restaurant to reflect this change, but I do not have access to the longitude and latitude values because they are defined in Screen1.

Is there a way to update the restaurants without access to the complete list of query key? I know the query key starts with 'restaurants'.

[weak fossil]

queryClient.setQueriesData

[zealous crest]

That 👆 . queryClient.setQueriesData accepts a QueryFilters (https://tanstack.com/query/v4/docs/react/guides/filters#query-filters) as first param, so you can pass only a part of the key (in your case 'restaurant') and it will update the data for all the queries that match that filter (the updater function that you pass as second param is called for each match).

Then, in the updater function, you can update only the restaurant with a given id.