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))