To stream messages, we'll implement logic very similar to how we stream the creation of rooms from earlier.
First, we need to convert MessageList
into a client component. We'll get an interesting error saying that only plain objects can be passed to client components from server components. This happens because the response we get back from Fauna is pretty complex. To fix this error we'll create a simple messages array and pass that down to the MessageList
component.
In the MessageList
component we'll create a useEffect
that will initiate a Fauna stream within a ref and push new messages into state that we are holding in the component.