Resource state never updates when consumed by <Show>
https://playground.solidjs.com/anonymous/d47ac50e-b5d4-4b1c-8cff-d2c8ed7e1199
Refetch the resource until it fails to make a joke, observe that the
joke.state never updates afterward.
Is this a bug?Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
17 Replies
GitHub
createResource is always in pending state when used with `` compo...Describe the bug The resource remains pending even after the fetcher throw an error. With astro it remains unresolved: https://stackblitz.com/edit/github-bxb9uz-fpjsjd?file=src%2Fcomponents%2FSolid...
well I still have no idea how to fix this
spooky action at a distance is very uncomfortable
calling
joke() causes the error to be thrown to an ErrorBoundary if present, since there's no error boundary in that example the app just freezes (might be nice if this was handled a bit better)I am consuming this resource in multiple places in my code, there's no one
<Show> that I can use with <ErrorBoundary> some of the consumers aren't even in jsx context
why does it work fine without <Show>?Bc
joke() never gets called in your example if you remove the <Show>ah so any consumer of
joke() receives the error?Basically
the error bubbles up from
joke() to the nearest boundary
same as suspenseSo I just need to create an
const foo = <ErrorBoundary>{joke()}</ErrorBoundary> somewhere in my codebase?
I'm still struggling with the idea of "nearest"
the resource is an export export [example] = createResource(fetchExample) in my code
and its consumed/shared by multiple pages"nearest" being the closest ancestor. jsx is a tree, the error propagates up the tree like DOM events until it's handled by an error boundary
so you have the option to wrap the call to
joke() in a boundary directly, or you could add one around your whole app, depends where you want to display the error boundary fallback
or you could put it somewhere in the middle, it just has to be a parent of the call to joke()
in your example you could also do joke.state !== "errored" && joke() to prevent joke() from being called to get the behaviour you wantif I have multiple places that consume
joke() like in different components can I have multiple ErrorBoundaries?certainly
you could put them inside the components, outside the components, wherever
okay, then I think I see a path forward out of this. I really didn't expect
createResource to do strange things like this 😅
I thought it was a simple signal that got updated with the results of an async task
am I perhaps using the wrong thing?nah you're on the right track, solid just leans heavily into suspense and error boundaries
though i'd advise that if you're looking to handle very specific types of errors, don't just throw them
return them so you can handle them as actual data and so you get type inference for them
so that's what the documentation means by
data.latest will return the last returned value and won't trigger Suspense and transitions; if no value has been returned yet, data.latest acts the same as data()so in reality what I want to be using is
joke.latestthat will work most of the time, but if the first load throws an error then it'll still trigger the error boundary
since if no value has been returned then it's the same as calling the accessor
latest is more to avoid re-suspending on subsequent fetches after first load has completedso then
() => joke.state !== "errored" ? undefined : joke.latest is the most accurate match for my "behaves like a simple signal updated from an async task"
I've made too many assumptions that it works that waypretty much, but i don't think i'd recommend it