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

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.

SolidJS•3y ago•

25 replies

jwueller

Dealing with null checks on resources

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

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.

Dealing with null checks on resources

Similar Threads

Dealing with null checks on resources

Similar Threads

Similar Threads

Similar Threads