useQuery with selector is causing infinite requests / re renders - reactjs

Question

I have a large list of items that can be filtered, updated, and deleted. I'm using ReactQuery to fetch the list of items like this
export function useLibraryItems() {
return useQuery(['items'], () => API.FETCH_LIBRARY_ITEMS().then(response => response.data))
}
// And used later in my component like this
const items = useLibraryItems()
Due to the size of the list I'm rendering the items through a virtualized list like this
const ItemRow = ({ index, style }) => (
<Item
key={index}
item={items.data[index]}
style={style}
/>
)
<FixedSizeList
height={virtualListDimensions.height}
width={virtualListDimensions.width}
itemSize={30}
itemCount={items.data.length}
>
{ItemRow}
</FixedSizeList>
A simplified version of my item component looks like this
function Item({ item, style }) {
const [_item, setItem] = useState({ ...item })
const updateItem = useItemUpdate()
const onSaveClick = () => {
updateItem.mutate({ ..._item })
}
return (
<div>
...inputs to update item values
<button>
Update
</button>
</div>
)
}
The update item mutation looks like this
export function useUpdateLibraryItem() {
let client = useQueryClient()
return useMutation(args => API.UPDATE_LIBRARY_ITEM(args.id, args.params).then(response => response.data), {
onMutate: async (args) => {
await client.cancelQueries(['items'])
let prev = client.getQueriesData(['items'])
client.setQueriesData('items', items => [
...items.map(item => {
if(item._id === args.id)
return { ...item, ...args.params }
else
return item
})
])
return { prev }
}
})
}
This is all working as expecting. Now I'm trying to optimize this by making each item a selector. One issue with this current implementation is that if there are updates to multiple items in the list and you save the changes for one item it will optimistically update that item and the list which will clear all other updates in the list that have not been saved. So my attempts to subscribe to a single item of the items list currently looks like this
const ItemRow = ({ index, style }) => (
<Item
key={index}
id={items.data[index]._id}
style={style}
/>
)
And a new useQuery hook to select the item from the cache
export const useLibraryItem = (id) => {
return useQuery(['items'], () => API.FETCH_LIBRARY_ITEMS().then(response => response.data), { select: (items) => items.find(item => item._id === id) })
}
function Item({ id, style }) {
const item = useLibraryItem(id)
const [_item, setItem] = useState({ ...initial_item })
useEffect(() => {
setItem({ ...item.data })
}, [item.status])
const updateItem = useItemUpdate()
const onSaveClick = () => {
updateItem.mutate({ ..._item })
}
return (
<div>
...inputs to update item values
<button>
Update
</button>
</div>
)
}
When this code compiles it runs infinitely. If i add a console.log into the useEffect I will see it endlessly. So to solve this I needed to add the id's into the query key which looks like this
export const useLibraryItem = (id) => {
return useQuery(['items', id], () => API.FETCH_LIBRARY_ITEMS().then(response => response.data), { select: (items) => items.find(item => item._id === id) })
}
return useMutation(args => API.UPDATE_LIBRARY_ITEM(args.id, args.params).then(response => response.data), {
onMutate: async (args) => {
await client.cancelQueries(['items', args.id])
let prev = client.getQueriesData(['items', args.id])
client.setQueriesData(['item', args.id], item => {
return { ...item, ...args.params }
})
return { prev }
}
})
}
When this code compiles it no longer runs infinitely, but it makes a new request to API.FETCH_LIBRARY_ITEMS for every item in the list. This must be due to no longer referencing the query key of ['items'] as its now ['items', id] so it no longer caches.
Does React Query not support selectors in the way that I'm trying to use them or is there a way to implement them the way that I am trying to?
*I'm working on a sandbox for this question and will be updating with the link shortly

Answer 1

Does React Query not support selectors in the way that I'm trying to use them or is there a way to implement them the way that I am trying to?
react-query has selectors, but you are not using them in your example:
export function useLibraryItems(select) {
return useQuery(['items'], () => API.FETCH_LIBRARY_ITEMS().then(response => response.data), { select })
}
export function useLibraryItem(id) {
return useLibraryItems(data => data.find(item => item.id === id))
}
every time you call useLibraryItem, you will use the libraryItems query and only select a slice of the resulting data (the item that matches your id). Keep in mind that with the default settings of react-query, you will still get a background refetch of the list query every time a new item query mounts, because refetchOnMount is true and staleTime is zero.
The best way is to set a staleTime on the list query that tells react-query for how long the data is considered fresh. During that time, there won't be any additional requests.