#Is fallback prop necessary for suspense?

2 messages · Page 1 of 1 (latest)

woeful crater
#

I tried to simplify this example as much as I can:

The provided code will render userData() about 50% of the time when refreshing. The other 50% it seems to just be an empty string

My understanding is that Suspense should be used whenever you access an object from createAsync. I can confirm the data is being fetched correctly on the server from server logs.

It seems to only repro when running on a production server (in this case, cloudflare pages) but when I run locally there is no issue with this. When I add the fallback prop to the suspense tag, it looks like it renders 100% of the time

I'm a bit new to SSR so please feel free to correct any misunderstandings I have with this.

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";
import { getSBUser } from "~/utils/supabase/auth";

const getUser = query(async () => {
    "use server";
    const { data, error } = await getSBUser();

    return data;
}, "user");

export default function Test() {
    const userData = createAsync(() => getUser());

    return (
        <>
            {/* this suspense does not eventually show the user data even though I can confirm it resolves from a server log */}
            <Suspense>
                <pre>{JSON.stringify(userData(), null, 2)}</pre>
            </Suspense>
        </>
    );
}
hexed hedge
#

can you confirm that you getting data on frontend and its just not showing in Suspense ?

createEffect(() => {
  console.log("userData", userData());
})