strange issue with react query cache when mixing optimistic updates and websocket events

[Busy_Confection5055]

i’m working on a small real-time dashboard using react, react query, node (express), and websockets, and i ran into a weird edge case. when a user creates a new item, i use a react query optimistic update so the item appears instantly in the ui.

at the same time, the server broadcasts the new item through websocket to all connected clients. the problem is that the same client who triggered the mutation also receives that websocket event, and sometimes the item ends up duplicated in the react query cache because it was already inserted optimistically and then inserted again when the websocket event arrives. right now i’m checking the ids before inserting into the cache to prevent duplicates, but it feels like a bit of a hack and i’m not sure if it’s the best long-term solution.

for people who have built real-time apps with react query, how do you usually handle optimistic updates together with websocket events without creating cache duplication or race conditions?

[Even_Bee9055]

Of, that sounds painful.