use virtualization in react-query-devtools

[stephen-dahl]

my project loads a list of 1000 items. we then manually add each of those items to the query cache under their own key so that we don't have to reload them in other components that query them individually. The result is that the dev tools take a few seconds to update because of so many entries. Virtualization should be added to prevent the render lag.

[TkDodo]

we then manually add each of those items to the query cache under their own key so that we don't have to reload them in other components that query them individually.

why not use select ?

const useItems = (select) => useQuery({
  queryKey: ['items'],
  queryFn: fetchOneThousandItems,
  select
})

const useItem = (id) => useItems(items => items.find(item => item.id === id))

[stephen-dahl]

we are not always loading the list upfront. this is part of a generic system that takes an id and gets the display name for it as it is rendered. most of the time these queries are aggregated by a batcher that grabs all the names for this render and returns each name to the query that asked for it. We usually do not have a query pre-populating the cache but in this instance already have the names loaded so...

[TkDodo]

Virtualization should be added to prevent the render lag.

If you want to, please open a PR that uses @tanstack/react-virtual for this