SolidJS•10mo ago

Escape Suspense when using resources?

Is there any way to escape supsense when using createResources? or am i pretty much "doomed" once i have one suspense boundary at the top of the tree? What i mean by "escape" is to not trigger the suspense to fall back. Playground: https://playground.solidjs.com/anonymous/1a49076e-e6b1-4577-962d-3098c3263eea The only way i can think of is with transitions (like in that playground). But once those are used, the "loading" or "status" props are no longer useable and i'd instead have to wrap the "pending" signal of the transition hook i think? Is there an easier way to escape? Also i am not really sure how i would go about wrapping a resource in a transition if i want it to immediately fetch (vs. after an interaction like in the example. Looking at the third "options" param nothing sounds like it would do it. https://deploy-preview-360--solid-docs.netlify.app/reference/basic-reactivity/create-resource Thanks

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

9 Replies

lxsmnsyc•10mo ago

add another Suspense boundary, closest to where you access your resource data there's no "escape" since createResource and Suspense are dependent to one another

KamehamehaNudelOP•10mo ago

Hmm I thought, createResource was also kinda the goto convenience wrapper to „get prromises“ into signals For context: I had a geolocation request wrapped and on interaction request it from the user. But I kinda don’t want that to reset the whole layout but just have a „pending“ on the button createeffect is my friend I suppose

lxsmnsyc•10mo ago

it is, and Suspense is the UI manager for it there's a lot more going on in the internals but the shallow detail is createResource and Suspense rely on one another

KamehamehaNudelOP•10mo ago

hmm i guess i have to restructure the markup a bit then

lxsmnsyc•10mo ago

if you aren't relying on the data to be resolved by the promise then createEffect is fine

KamehamehaNudelOP•10mo ago

Thanks for the answers. I'll try to wrap my head around it But tbh right now i still don't really get why i cannot "get back" the behavior of the resource as if there were no suspense. i kinda just put the <suspense> at the top of the tree without much though since all router examples had it 😅

lxsmnsyc•10mo ago

that's just the fallback, but don't rely on it. It's required to put a Suspense boundary as close to the data access

KamehamehaNudelOP•10mo ago

yeah what i was trying to achieve is something like. "from this point on stop caring about suspense again and just be undefined" idk maybe my whole approach i had is flawed

Samual 🦢•9mo ago

I had to do this to avoid suspense for a specific resource:

const [ foo ] = createResource(
    () => {
        // ...
    },
    async bar => {
        // ...
    }
)

const getFoo = createMemo(() => foo.loading ? undefined : foo())

const [ foo ] = createResource(
    () => {
        // ...
    },
    async bar => {
        // ...
    }
)

const getFoo = createMemo(() => foo.loading ? undefined : foo())

and then use getFoo() instead of foo directly

Gaming

Programming

Escape Suspense when using resources?