Challenge 1 / 1

My awesome chat application has 2 template fragments that I need to update via Turbo Streams. One, the chat messages, lives under chat/_messages.html.twig. A second one, a list of users, is on chat/_user-list.html.twig.

When a user enters a message on the chat, we need to update both! (We'll see how to receive server notifications soon!).

How can I accomplish this by rendering only one Turbo Stream request?

<turbo-stream>
    <template action="update" target="chat-messages">
        {{ include('chat/_messages.html.twig') }}
    </template>

    <template action="replace" target="chat-user-list">
        {{ include('chat/_user-list.html.twig') }}
    </template>
</turbo-stream>

<turbo-stream action="update">
    <turbo-stream-fragment target="chat-messages">
        <template>
            {{ include('chat/_messages.html.twig') }}
        </template>
    </turbo-stream-fragment>

    <turbo-stream-fragment target="chat-user-list">
        <template>
            {{ include('chat/_user-list.html.twig') }}
        </template>
    </turbo-stream>
</turbo-stream>

<turbo-stream action="update" target="chat-messages">
    <template>
        {{ include('chat/_messages.html.twig') }}
    </template>
</turbo-stream>

<turbo-stream action="replace" target="chat-user-list">
    <template>
        {{ include('chat/_user-list.html.twig') }}
    </template>
</turbo-stream>

There cannot be more than one <turbo-stream> element per request!

Rewatch the video