Currently working with reactflow and yjs
I have seen lots of example where we can use the single instance of ydoc to sync the data for a single rooom name.
I am using websocket provider and yjs to try to sync my diagrams that i create in reactflow.I have to switch between diagrams and collaborate with diagram which is shared only…Its similar to switching the chatroom but I am not able to quite figure it out how we can actually do that…I didnt find example related to that as well…I am trying to do it on the basis of url with react router and the page wont refresh when my chatroom change.The problem is data are overlapping between two rooms when I switch the rooms. Can anyone please guide me with any resources that I can use to solve this problem?
You have a lot of moving parts there, which is going to make it hard to debug (and hard to get useful help), so I would first try to isolate the problem. When you switch rooms, do you instantiate a new Doc and new WebsocketProvider? Does the WebsocketProvider sync correctly? I would confirm that directly (by logging doc.toJSON() on sync) in order to test it separately from the routing and rendering logic.
Hy raine
Yes it is getting really hard to debug
When I switch my room I dont instantiate a new doc…I tried to destroy the previous instance of ydoc by using destroy() when I switch the rooms and create a new Websocket provider instance for each different room-name.
I have imported ydoc from a single file to use on whole application
Even when I am destroying the instance and creating a new provider…the ydoc is not getting destroyed and the nodes and edges are overlapping
Even if i create a new doc each time i change room, i cannot export that new doc to all the places that I am using ydoc
I think I don’t have much knowledge on how to use this…so its getting even more tough
I hope it makes sense to you what I am trying to explain
This is the screen that frequently shows up when I change my diagrams or rooms
Maybe try destroying the old Doc and then instantiating a new Doc when switching rooms.
If the content or the event handlers are still being referenced, they won’t get destroyed. Not sure that’s really your issue though. Worst case with not destroying a Doc is that it just causes a small memory leak.
Instead of exporting the Doc itself, maybe you can export a ref object, i.e. export const docRef = { current: new Y.Doc(...) }. Then you can do docRef.current = new Y.Doc(...) to change Doc instances without re-exporting.
In my app I have limited Doc access to a single file. All interactions to the data have to go through my reducer first.
Yeah, it seems like you have a lot of different variables at play. It’s going to be hard for you to identify the problem without narrowing it down first by ruling out different possibilities.
That suggests that you have an observe handler that causes a re-render, which causes a Doc change, which causes observe to fire, which causes a re-render…