Populating 'child' queries on success of 'parent' queries?

[cory-weiner]

Lets say I have a number of queries which fetch "Books" from my api. For example, "BOOKS" which fetches all books in an infinite query, a second which fetches books the user has read, and a third which fetches a single book by ID. In all cases, the structure of a 'book' record is identical accross all queries.

["BOOKS"]
["BOOKS", {read: true}]
["BOOKS", {id: 123}]

Let's say the user is viewing a list of books and clicks one to open the "individual" book page.

The app already has the data for book 123 in the ["BOOKS"] query in this case, however since the third query ["BOOKS", {id: 123}] never executed, it will have a delay in loading the page.

I can think of two ways to fix this....

Method 1:
onSuccess of the ["BOOKS"] query, setting the query cache for each record returned on the related ID query. For example, if the ["BOOKS"] query returns 100 books, set the cache for each individual book using a forEach queryClient.setQueryData(["BOOKS", id], updater)

 ["BOOKS", {id: 1}] // Set cache to the result of book with ID 1 from the books query
 ["BOOKS", {id: 2}] 
 ["BOOKS", {id: 3}]
etc... 

Method 2:
The other option I am considering is, on the component that uses ["BOOKS", {id: 123}], first search the querycache for a ["BOOKS"] to see if a record with that value exists, and if so pass it in as placeholder data to useQuery()

My question is:
Is the first technique a bad practice? Is this going to lead to performance issues? Are there other design patterns you use to accomplish this?

[TkDodo]

Method 1 won't work because the callbacks have been removed in v5.

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