SolidJS•2y ago

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.

16 Replies

mdynnl•2y ago

https://docs.solidjs.com/references/api-reference/control-flow/Suspense

jwuellerOP•2y ago

I'm sorry, but I fail to see how this addresses the question. I'm not asking about how to deal with a loading state or doing a fallback.

mdynnl•2y ago

i see, i probably didn't read the question thoroughly

jwuellerOP•2y ago

A suspense could certainly help when I actually go and render the tag page, though.

mdynnl•2y ago

you could maybe throw on 404 and catch it with ErrorBoundary

jwuellerOP•2y ago

Yeah, I also considered that. My issue with that was that it requires me to create separate logic for converting null responses to errors, and also requires the "not found" error to be distinguishable from other kinds of errors, since it's not the same as an actual crash.

mdynnl•2y ago

https://start.solidjs.com/api/HttpStatusCode#setting-a-404-status-code-for-missing-pages-for-dynamic-routes probably relevant along the lines of but could use better convention though like throwing error code or custom error class and check against that instead of checking error message

jwuellerOP•2y ago

Yeah, it would definitely have to be something more robust and type-safe than checking error messages. But that would also require me to add a lot of additional code for something that is essentially just a simple if, which makes me very hesitant to do it that way.

mdynnl•2y ago

hmm, it should the same amount of code if you considered all the code required to show the error state the only thing that added is throw and catch(ErrorBoundary) this is only if you want better abstraction for typechecking etc and ErrorBoundary can be nested

jwuellerOP•2y ago

A minimal version might be close, but an equivalent version doesn't seem to be. The Next.js version is trivial and type-safe by default, and the SolidStart version would require adding an indirection like throwing and catching an error specific to that particular use-case.

mdynnl•2y ago

not really familiar with next but i bet they probably do it on the framework level

jwuellerOP•2y ago

It's just TypeScript narrowing the value type after the if, so it knows that there can't be any nulls afterwards.

mdynnl•2y ago

like they have something similar to ErrorBoundary wrapping by default, let me read it up

jwuellerOP•2y ago

Sure they must have some system to signal the notFound() function call to some component above. If I understand what you're referring to

mdynnl•2y ago

ah, i see that kind of if check doesn't work nicely with solid

jwuellerOP•2y ago

I guess I'm dealing with several issues at once here. One being the type narrowing and control flow being less straightforward, and the other being signaling the 404 to SolidStart. I appreciate you taking the time, by the way!

Gaming

Programming

Dealing with null checks on resources