GraphQL Streaming response and Remix streaming integration?

[neviaumi]

Hi , i am going to implement Graphql streaming response described here Graphql Blog

So i have implement the example repo setup here with graphql-yoga to provide graphql resolver and urql library to communicate to server.
The repo was here.
Also see the Graph Def here

It was success on CSR without any problem see here
Streaming
Defer

And i can implement the defer feature on SSR by using Remix defer
You can find the implementation here

But when try implement the stream, i have no idea what i can do on Remix SSR as stream wasn't one-off async response.
I try use ReadableStream here but obvious the defer wasn't accept Stream as a parameter.

You can see my attempt below

import {gql} from "urql"
import {defer } from "@remix-run/node";
import {useLoaderData ,Await} from "@remix-run/react"
import {Duplex, Readable} from "node:stream";
import {createClient, fetchExchange} from "@urql/core";
import {Suspense} from "react";

const ListPokemons = gql`query ListPokemons {
    pokemons {
        total
        pokemons @stream {
            name
            type
            total
            hp
            attack
            defense
            spAtk
            spDef
            speed
            generation
            legendary
            id
            sequence
        }
    }
}`

export async function loader() {
    const responseStream = new Duplex({
        final() {
            this.push(null);
        },
        objectMode: true,
        read() {},
    });
    const {unsubscribe} = createClient({
        exchanges: [fetchExchange],
        url: 'http://localhost:8080/graphql',
    }).query(ListPokemons,{
    }).subscribe((result) => {
        responseStream.push(result);
        if (!result.hasNext) {
            responseStream.end()
        }
    })
    responseStream.on('end', () => unsubscribe())
    // Without toArray() defer wasn't working as expected
    // return defer({pokemons: Readable.from(responseStream)})
    return defer({pokemons: Readable.from(responseStream).toArray()})
}

export default function StreamingOnServer() {
    const loaderData = useLoaderData<typeof loader>()

    return <Suspense fallback={(<div>Loading...</div>)}>
        <Await resolve={
            loaderData.pokemons
        }>
            {({pokemons}) => {
                return <>
                    {pokemons.map((pokemon: any) => {
                        return <div key={pokemon.id}>
                            <h1>{pokemon.name}</h1>
                            <p>{pokemon.type}</p>
                            <p>{pokemon.total}</p>
                            <p>{pokemon.hp}</p>
                            <p>{pokemon.attack}</p>
                            <p>{pokemon.defense}</p>
                            <p>{pokemon.spAtk}</p>
                            <p>{pokemon.spDef}</p>
                            <p>{pokemon.speed}</p>
                            <p>{pokemon.generation}</p>
                            <p>{pokemon.legendary}</p>
                            <p>{pokemon.id}</p>
                            <p>{pokemon.sequence}</p>
                        </div>
                    })}
                </>
            }}
        </Await>
    </Suspense>

}

So what i can do in order to deal with the stream ?

I saw remix-utils has provide a function to provide eventStream features on top of SSE events.

But beside of integrate the eventStream and GraphqlStream, did it have some more native way to do so ? Extra layer on top of GraphqlStream sound like a unnesscary complexity for me.