SolidJS•2y ago

Resource from async generator?

Hey everyone, brand new to SolidJS. I'm working with a library that uses an async generator to return the current state, and then await for any updates (or errors). This is close enough to a resource that I figured it would make sense to wrap the generator.

const gen = props.player.broadcasts()
const [broadcasts, { refetch }] = createResource(async () => {
    const next = await gen.next()
    if (next.done) {
        throw "unexpected end"
    }
    return next.value
})

// infinite refresh
createEffect(() => {
    broadcasts()
    refetch()
})

const gen = props.player.broadcasts()
const [broadcasts, { refetch }] = createResource(async () => {
    const next = await gen.next()
    if (next.done) {
        throw "unexpected end"
    }
    return next.value
})

// infinite refresh
createEffect(() => {
    broadcasts()
    refetch()
})

The problem is that the value doesn't seem to be reactive after a refetch. I can log that the value being returned on the refetch (next.value) is correct, but it doesn't trigger rendering or the effect to fire again.

1 Reply

kixelatedOP•2y ago

I think the misunderstanding is somewhere else, because even a simple Signal is not reactive:

const [broadcasts, setBroadcasts] = createSignal<Array<string>>([])

createEffect(async () => {
    for await (const broadcasts of props.player.broadcasts()) {
        console.log("got broadcasts", broadcasts)
            setBroadcasts(broadcasts)
    }
})

const [broadcasts, setBroadcasts] = createSignal<Array<string>>([])

createEffect(async () => {
    for await (const broadcasts of props.player.broadcasts()) {
        console.log("got broadcasts", broadcasts)
            setBroadcasts(broadcasts)
    }
})

return (
    <>
        <p class="mb-6 text-center font-mono text-xl">Watch</p>
        <ul>
            <For each={broadcasts()} fallback={<li>No live broadcasts</li>}>
                {(broadcast) => {
                    return (
                        <li class="mb-4">
                            <a>{broadcast}</a>
                        </li>
                    )
                }}
            </For>
        </ul>
    </>
)

return (
    <>
        <p class="mb-6 text-center font-mono text-xl">Watch</p>
        <ul>
            <For each={broadcasts()} fallback={<li>No live broadcasts</li>}>
                {(broadcast) => {
                    return (
                        <li class="mb-4">
                            <a>{broadcast}</a>
                        </li>
                    )
                }}
            </For>
        </ul>
    </>
)

okay, I figured it out so the problem was that new broadcasts were being pushed to the array and returned as part of the generator so the array returned by the generator was not actually returning new values, but rather the same value at a new point in time so solid uses === and decides nothing has changed, so no need to render

Gaming

Programming

Resource from async generator?