Use individual cached item when rendering a collection of items, if present

[todor-a]

Hey. Imagine there is a query like:

const { data } = useQuery({
  queryKey: ['books'],
  queryFn: () => Promise.resolve([{ id: 1, name: 'Hey' }, { id: 2, name: 'Bye' }]),
})

And another one like:

const { data } = useQuery({
  queryKey: ['books', '1'],
  queryFn: () => Promise.resolve({ id: 1, name: 'Hey', author: '...', year: '...' }]),
})

The UI presents a list of books and when the user picks one, we fetch the detailed data it.

I'm wondering if there is a way to use the detailed book data for the list of books query? The use case is that, when a book is updated, a server-sent event is received and we need to invalidate the data - we can either invalidate the entire books query, or we can invalidate the data for that individual book only and replace it in the cache. The problem is that, if the user never opened that book's details, there is no individual book query to invalidate.

Is this a total misuse of TanStack Query or is it a legit use case?

[TkDodo]

Not sure I fully understand the use-case, but if you want normalized caching, have a look at normy:

• https://github.com/klis87/normy

[todor-a]

This looks interesting and I will definitely have a look.

Reading back my question, I did not do a good job explaining what I wanted to achieve - tl;dr, if there is a "detailed" version of a resource, I want to use it in the "list" version of the resource. Currently, when something is updated, I need to invalidate the entire list of resources in order to get the latest version of the resource.

[TkDodo]

when something is updated, you can write back to the list with queryClient.setQueryData:

https://tanstack.com/query/v5/docs/framework/react/guides/updates-from-mutation-responses

[todor-a]

Thanks. I ended up with the following setup:

1. when an event is received that something is updated, fetch the query for it explicitly (by id)
2. if it's in the list, substitute it