SolidJS•2mo ago

createAsyncResource and <Suspense>

import { createAsync, cache } from "@solidjs/router";
import { For, Suspense } from "solid-js";
import * as edgedb from "edgedb";
import e from "../../dbschema/edgeql-js";

const getTodos = cache(async () => {
    "use server";
    const client = edgedb.createClient();
    //Simulate long running query
    await new Promise((r) => setTimeout(r, 2000));
    return e
        .select(e.Todo, () => ({
            text: true,
            done: true,
        }))
        .run(client);
}, "todos");

export const route = {
    load: () => getTodos(),
};

export default function Page() {
    const todos = createAsync(() => getTodos(), {
        deferStream: true,
    });

    return (
        <div>
            <h1>Todos</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <For each={todos()}>{(todo) => <div>{todo.text}</div>}</For>
            </Suspense>
        </div>
    );
}

import { createAsync, cache } from "@solidjs/router";
import { For, Suspense } from "solid-js";
import * as edgedb from "edgedb";
import e from "../../dbschema/edgeql-js";

const getTodos = cache(async () => {
    "use server";
    const client = edgedb.createClient();
    //Simulate long running query
    await new Promise((r) => setTimeout(r, 2000));
    return e
        .select(e.Todo, () => ({
            text: true,
            done: true,
        }))
        .run(client);
}, "todos");

export const route = {
    load: () => getTodos(),
};

export default function Page() {
    const todos = createAsync(() => getTodos(), {
        deferStream: true,
    });

    return (
        <div>
            <h1>Todos</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <For each={todos()}>{(todo) => <div>{todo.text}</div>}</For>
            </Suspense>
        </div>
    );
}

I would expect this to first render Todos Loading... for 2 seconds and then all the todos in a list instead of the Loading However when I open the page, the browser loading indicator is there for 2 seconds and then just the "end result" gets rendered in the browser. What am I doing wrong? Quite new to solid so please excuse if this question is dumb haha Thanks for help!

5 Replies

peerreynders•2mo ago

deferStream: true is telling the server to hold the response until that async op has settled. Try removing it and see what happens.

NotLuksus•2mo ago

Lmao, that works, my bad, thought defer stream would do the opposite, read another thread wrong then. Thanks a lot!

peerreynders•2mo ago

Just note that once the response starts streaming it's too late to modify cookies if you need to.

NotLuksus•2mo ago

good to know, seems reasonable tho is there a way to tell it when to start streaming? or is it always instantly

peerreynders•2mo ago

I only know of deferStream as a means for influencing that. That doesn't mean there isn't another way though.

Gaming

Programming

createAsyncResource and <Suspense>