Best practices for caching list/detail data

[JurajKavka]

Hello,

what is the best practice for caching list/detail data? It's simple a commonly used concept in Redux. Imagne, you have page with list view so all of the list data is stored in cache and rendered in table. When user clicks on list item, he is routed to detail URL with some id. In detail URL page, I want to instantly show data that we have in cache already (i.e. title, perex, etc) but in background request for detail data is fired and those data should be stored in cache too. In Redux store I just rewrite list data with detail data - but the place of data in cache is exactly the same.

Ho to do the same in react-query? Or is there a better concept? Can I modify data in cache where I have stored list of data?

Thank You.

J.

[nhducit]

Check this document https://react-query.tanstack.com/guides/initial-query-data

// listing page
 function Todos() {
   // Will show initialTodos immediately, but also immediately refetch todos after mount
   const result = useQuery('todos', () => fetch('/todos'))
 }
 
 // details page
  function Todo({ todoId }) {
   const result = useQuery(['todo', todoId], () => fetch('/todos'), {
     initialData: () => {
       // Use a todo from the 'todos' query as the initial data for this todo query
       return queryClient.getQueryData('todos')?.find(d => d.id === todoId)
     },
   })
 }

[elisescu]

Very helpful answer, @nhducit !
A related/followup question to @JurajKavka question I have is the "reverse" flow: when the user makes a change to one of the elements in the list (one of the TODOs/detail view) how can that change be reflected into the list (so the list contains now the changed element, without waiting to request the updated list from the server - given that the API that updated the individual element returned back the updated object, so we have it)

[JurajKavka]

previous answer implements two cache storages - one for list and others for individual details. In redux we had just one place in cache with incomplete data from list request or complete detail data which solves also your question - how to update data back in list. i'm looking for exactly this solution - replace incomlete list data with detail data in one place in cache...

[TkDodo]

react-query caches separately per key, so yes, you'll have multiple "storages" (one for the list data, and one for each detail).

how to update data back in list

there are basically two ways:

• use invalidateQueries to re-fetch the necessary data - see invalidations from mutations
• update all relevant caches manually - see updates from mutation responses
  • you can also use queryClient.setQueriesData to target multiple cache keys at the same time.