Nested Rooms in React causing error about liveblocks HOT 8 CLOSED

Hi @amcdnl – thanks for opening a support ticket. The nesting of RoomProviders should not be an issue indeed—it's supported since v1.5.0.

The useMutation callback can only be called after the initial storage document has been loaded by your application. Waiting for status === 'connected' is not enough for this. That is only the WebSocket status. After the WebSocket is connected, the Storage loading phase begins. You can listen for the storageStatus status instead. If it's synchronized or synchronizing, it means it has been loaded. You can find the relevant docs here.

Hope that helps to resolve it for you!

from liveblocks.

I realize that the error message may have put you on the wrong track. I'll get that fixed 👍

from liveblocks.

Yup that works. Perhaps you should call that out in the docs. I'm going to close this now - thank you

from liveblocks.

@nvie - Sadly, it never moves out of not-connected. Any clues why this might be?

Quesiton: since i'm using 2 rooms, do i need 2 liveblocks.config.ts ?

from liveblocks.

@nvie - Sadly, it never moves out of not-connected. Any clues why this might be?

That's odd, and definitely unexpected. Could you add the following logging options?

In your client setup:

const client = createClient({
  /* options */,
  enableDebugLogging: true,
});

Also, could you maybe add the following effect in one of your top-level components?

const room = useRoom();
useEffect(() => {
  const unsub1 = room.events.status.subscribe((status) => console.log({ status }));
  const unsub2 = room.events.storageStatus.subscribe((storageStatus) => console.log({ storageStatus }));
  return () => {
    unsub1();
    unsub2();
  };
}, [room]);

Maybe that will give you a bit more debug info.

Quesiton: since i'm using 2 rooms, do i need 2 liveblocks.config.ts ?

You would only need to liveblocks configs if you have two room types (with different data shapes in each room type). If you have multiple room instances that all have the same data shape inside them you would not need two liveblocks configs. Can you tell me a bit more about these two room (types)?

from liveblocks.

@nvie - Here is the console output:

And here is my room structure - I have 1 main room called home and then a room for each session tab.

from liveblocks.

@nvie - This is fun, if I add const store = room.getStorage(); it seems to start working. I think its not binding until something tells it to listen?

from liveblocks.

@amcdnl Oh yeah, you will need to trigger a storage load explicitly, either by doing a .getStorage() call, or by using a hook like useStorage. I was under the assumption you were doing that already. Once storage starts loading, this should work for you. Please lmk if it is not!

from liveblocks.