S
SolidJS15mo ago
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
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
jwueller
jwueller15mo 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
mdynnl15mo ago
i see, i probably didn't read the question thoroughly
jwueller
jwueller15mo ago
A suspense could certainly help when I actually go and render the tag page, though.
mdynnl
mdynnl15mo ago
you could maybe throw on 404 and catch it with ErrorBoundary
jwueller
jwueller15mo 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
mdynnl15mo 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
jwueller
jwueller15mo 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
mdynnl15mo 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
jwueller
jwueller15mo 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
mdynnl15mo ago
not really familiar with next but i bet they probably do it on the framework level
jwueller
jwueller15mo ago
It's just TypeScript narrowing the value type after the if, so it knows that there can't be any nulls afterwards.
mdynnl
mdynnl15mo ago
like they have something similar to ErrorBoundary wrapping by default, let me read it up
jwueller
jwueller15mo 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
mdynnl15mo ago
ah, i see that kind of if check doesn't work nicely with solid
jwueller
jwueller15mo 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!