#Resource state never updates when consumed by <Show>

1 messages · Page 1 of 1 (latest)

crisp geyser
#

well I still have no idea how to fix this

#

spooky action at a distance is very uncomfortable

somber tiger
crisp geyser
#

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

crisp geyser
somber tiger
#

Bc joke() never gets called in your example if you remove the <Show>

crisp geyser
#

ah so any consumer of joke() receives the error?

somber tiger
#

Basically

#

the error bubbles up from joke() to the nearest boundary

#

same as suspense

crisp geyser
#

So 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

somber tiger
#

"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 want

crisp geyser
somber tiger
#

certainly

#

you could put them inside the components, outside the components, wherever

crisp geyser
#

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?

somber tiger
#

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

crisp geyser
#

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.latest

somber tiger
#

that 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 completed

crisp geyser
#

so 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 way