Patterns for keeping "list of items" and "individual item" in sync?

[bywo]

Say I have a query for a list of todos (/api/todos) and a query for an individual todo item (/api/todo/:id). The docs show an example of prepopulating the item query with data from the list query, but doesn't provide guidance on other scenarios:

• updating the item within the list when the item is fetched (and vice versa): Ideally, if the query to /api/todo/:id is performed, and that todo exists in the list, the todo item in the list should be updated with the latest version. Similarly, if the list gets refetched, the individual item query should be updated with the latest version.
• updating the item within the list when the item is mutated (and vice versa): The docs show an example of updating cache data in response to a successful mutation, so we could write the code to update both the list query cache and individual query cache. It'd be nice if an update to one automatically propagated to the other.

Curious if anyone's come up with solutions/patterns for this. Thanks!

[TkDodo]

updating the item within the list when the item is fetched (and vice versa)

I think you an achieve that by writing to the cache in onSuccess, something like:

useQuery(
  ['todos', id],
  () => fetchTodo(id),
  {
    onSuccess: (newTodo) => {
        queryClient.setQueryData(['todos'], (old) => old?.map(todo => todo.id === id ? newTodo : todo) ?? [])
    }
  }

it would also work the other way around: onSuccess of the list query, you create a bunch of detail query entries.

It'd be nice if an update to one automatically propagated to the other.

for that to work, an underlying schema would be needed that react-query doesn't have. queries and mutations don't know what they are actually doing. the best thing you can do is invalidate everything and let the smart refetching decide what it needs to refetch, or update after the mutation manually with the code shown above.

[bywo]

Got it, thanks!

[dburles]

Since onSuccess has been removed from queries, how might this be possible now? I have a use-case where I am trying to keep two queries in-sync.

[TkDodo]

see: https://tkdodo.eu/blog/seeding-the-query-cache#seeding-details-from-lists