Stream Chat Messages in Real-time in Next.js from Fauna

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.