Hook to listen on cache data (e.g. useSelector)

[angelsvirkov]

Hello guys, thank you for the amazing library, it has really increased the development speed of our projects. I would like to describe one scenario we often face and then ask you if there is an existing built-in solution or that would be something that can be added to react-query in the future.

Use case

• Observe query cache data with a hook that only listens on the cache data (no isFetching, no automatic background refetches, etc.)

Example scenario

• We have a piece of data that is needed in a dozen components. For example, that could be something like a user data fetched with useQuery
• Our app would fetch the data with useQuery at some point, maybe even very early in the lifetime of the app.
• There are multiple components that are rendered on the page and all need that piece of data.
• So basically on a mount of a new component which needs this data, if we use useQuery it would lead to re-rendering multiple other components at the same time because of the isFetching and potentially isLoading.
• This leads to a lot of unnecessary work and sometimes even to falling in the trap of performing an update on an unmounted component. Especially if a certain parent is using the same useQuery and some descendent of it is also using useQuery

Question

Is it possible in the current version of react-query to observe the query cached data with something like a useSelector hook or useQueryCacheData hook which only listens on the data property of queried data (and potentially on the isLoading and error)? I assume this would be possible to be implemented on top with the queryClient.observe() but I believe it is a very common pattern that might make sense to be part of the library.

Related Resource

I have found a couple of comments which go into the direction of what I'd wish to have:

• useTrackedState with notifying on specific changes - render optimization with proxies #1554
• The expected behaviour mentioned in useQuery: previous data unavailable to component mounting after fetch #2366

[TkDodo]

1. tracked queries made it into the library some time ago, so by setting: notifyOnChaneProps: 'tracked', possibly globally on the Provider, you'll only re-render if fields you are using change. so if you don't read isFetching, you will not get re-rendered.

2. the select option allows for partial subscription. If you want to turn off smart refetches, set staleTime and cacheTime.

combined, this would yield:

const useTodos = (select) => useQuery(
  'todos',
  fetchTodos,
  { select, notifyOnChangeProps: 'tracked', staleTime: Infinity, cacheTime: Infinity }
)

usage:

useTodos(todos => todos.find(todo => todo.id === 5))

⬆️

• only subscribes to todo number 5
• will only re-render if todo number 5 changes

I have written about this in my blog, see:

• https://tkdodo.eu/blog/react-query-data-transformations
• https://tkdodo.eu/blog/react-query-render-optimizations

[angelsvirkov]

Thank you very much. These articles are very useful!