SolidJSS
SolidJS•3y ago•
25 replies
jwueller

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


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

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.
Was this page helpful?