DEV Community

Discussion on: Using WebSockets with React Query

View post
Collapse
 
kael profile image
kael •

It's a bit too dynamic for my taste, doesn't handle addition or deletion [...]

Actually it does handle addition and deletion:

There is queryClient.setQueryData for addition.

And for deletion it's possible to use setQueriesData - I'm using it with arrays of items:

queryClient.setQueriesData(data.entity, (oldData) => {
  const deleteItem = (entity) => entity.id !== data.entity.id;
  return  oldData.filter(deleteItem) ;
});
Enter fullscreen mode Exit fullscreen mode

Unless I'm doing it wrong ?

Thanks for this react-query websocket starter guide. 👍

Collapse
 
tkdodo profile image
Dominik D •

That's right - you can do it with setQueriesData. I just meant that the code I wrote in the example doesn't handle it :). If you want to go that route it's perfectly fine. The biggest advantage of invalidation is the simpler code and that you don't push data down for queries that aren't even used.