Realtime and CRUD in React, best practices?
Let us say we create a React Todo app with simple CRUD operations. We want this app to be realtime so that changes are instantly seen by other connected clients.
When I add a new todo via a form, I make a call into supabase to insert a new todo row and immediately select the result in order to obtain an todo object that includes the auto-generated id column. I then add this todo object to my state.
The problem is that I'm also receiving that same todo via the realtime subscription, as if it had been created by someone else. To avoid duplication I compare the id of the newly insert todo with the one just received from the sub, and if they match I do not update the UI.
Is this the right approach? Is there a way to avoid pushing changes to the client that initiated it?
When I add a new todo via a form, I make a call into supabase to insert a new todo row and immediately select the result in order to obtain an todo object that includes the auto-generated id column. I then add this todo object to my state.
The problem is that I'm also receiving that same todo via the realtime subscription, as if it had been created by someone else. To avoid duplication I compare the id of the newly insert todo with the one just received from the sub, and if they match I do not update the UI.
Is this the right approach? Is there a way to avoid pushing changes to the client that initiated it?
