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>
    );
}