S
SolidJS•4d ago
MintyKong

Is fallback prop necessary for suspense?

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>
        </>
    );
}
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>
        </>
    );
}
2 Replies
Anshu
Anshu•4d ago
can you confirm that you getting data on frontend and its just not showing in Suspense ? 
createEffect(() => {
  console.log("userData", userData());
})
createEffect(() => {
  console.log("userData", userData());
})
MintyKong
MintyKongOP•3d ago
Sorry suddenly I'm having trouble reproing the issue, that's a good test though. I'll need to do some more testing and come back later to this

Did you find this page helpful?