shared cache?

[tamis-laan]

I have two query hooks, let's cal them useTodo and useTodos. The first one fetches a single todo by id and the second one fetches multiple todos by ids.

The thing here is that I don't want to reload a todo when useing the useTodo hook when the todo is already loaded by useTodos. Currently I'm using the query client to update the data of each todo after useTodos is done fetching:

	// Get the query client
	const queryClient = useQueryClient()
        // Fetch todos
        return useQuery(['todos',ids], api.fetchTodos, {
		onSuccess: todos => {
			// Update query for events
			todos.forEach( todo => queryClient.setQueryData(['todo', todo.id], todo) )
		}
        })

This works but only solves part of the problem. The first problem is that the same todo's now live twice in memory. Once for the useTodos and another for eacht useTodo. Second it only works one way, useTodos updates each useTodo but not the other way arround. The same problem occures with useInfiniteQuery.

Is there some way to make this more efficient?

[TkDodo]

The first problem is that the same todo's now live twice in memory.

yes, they do. That's part of the concept and often not a problem. List views often have a different structure than detail views and are not 1:1 copyable. React-Query doesn't have a schema or a normalized cache so having "duplicated" data in the cache is one of the tradeoffs.

Second it only works one way, useTodos updates each useTodo but not the other way arround. The same problem occures with useInfiniteQuery.

Instead of "pushing" data down in onSuccess you can pull data via the initialData function on all layers, so that it works vice-versa.

[tamis-laan]

Instead of "pushing" data down in onSuccess you can pull data via the initialData function on all layers, so that it works vice-versa.

Sounds interesting, does this mean one would pull only or also push the data? Is there an example of this somewhere for me completely comprehend?

[TkDodo]

Every query just pulls in initialData on demand. Combined with staleTime you wouldn't even get a background refetch if you don't want. initialDataUpdatedAt also helps to copy the correct "freshness" if necessary.
We have something in the docs: https://react-query.tanstack.com/guides/initial-query-data#initial-data-from-cache