jwueller
jwueller
PostsComments
SSolidJS
Created by jwueller on 4/29/2023 in #support
Dealing with null checks on resources
I'm trying to convert an app from Next.js to SolidStart to have a side-by-side comparison, but I'm encountering some weirdness when dealing with certain "expected error" states, like resources not being found. I have a blog with tagged articles. In Next, I would just do something like this in my component: 
const tag = await findTagBySlug(params.slug);
if (!tag) {
    notFound();
}

// render tag page
const tag = await findTagBySlug(params.slug);
if (!tag) {
    notFound();
}

// render tag page
I'm trying to achieve something similar with SolidStart: 
const [tag] = createResource(() => params.slug, findTagBySlug);
return (
    <>
        <Show when={tag.state === "ready" && !tag()}>
            <HttpStatusCode code={404}/>
            <ErrorLayout statusCode={404}/>
        </Show>

        <Show when={tag()}>
            {tag => (
                // render tag page
            )}
        </Show>
    </>
);
const [tag] = createResource(() => params.slug, findTagBySlug);
return (
    <>
        <Show when={tag.state === "ready" && !tag()}>
            <HttpStatusCode code={404}/>
            <ErrorLayout statusCode={404}/>
        </Show>

        <Show when={tag()}>
            {tag => (
                // render tag page
            )}
        </Show>
    </>
);
This doesn't seem right, since it requires significantly more overhead. Even just checking for null alone requires an additional JSX component and a separate function to wrap everything in. I would love to get some tips on how to deal with this.
26 replies