SolidJS•3mo ago

How do I postpone invocation of fetcher function of the solid-js resource?

I have following snippet in my .tsx file. Could you please explain why mappings resource is being called for switch branches that are false ? How can I avoid it ?

const [pipeline] = createResource(() => api.pipeline(params.id)) const [mappings] = createResource(() => api.pipelineMappings(params.id), { deferStream: true }) <Switch> <Match when={pipeline()?.state == PipelineState.INCOMPLETE}> {/Show this div when mapping is not loaded/} <div class="flex flex-col items-center py-12 px-4 sm:px-6"> <h1 class="text-medium mb-2 text-2xl text-neutral-600">No mappings</h1> <p class="text-neutral-600">Nothing to show until pipeline is fully configured.</p> </div> </Match> <Match when={pipeline()?.state != PipelineState.INCOMPLETE}> <Show when={mappings() != undefined} fallback={<LoadingIcon/>}> </Match> </Switch>

1 Reply

Alex Lohr•3mo ago

Just use a boolean source signal that is initially set to false (the fetcher will be called once set to true).

const [doFetch, setDoFetch] = createSignal(false);
const [data] = createResource(doFetch, fetcher);
// fetcher not called yet
setDoFetch(true);
// now the fetcher is called

const [doFetch, setDoFetch] = createSignal(false);
const [data] = createResource(doFetch, fetcher);
// fetcher not called yet
setDoFetch(true);
// now the fetcher is called

Gaming

Programming

How do I postpone invocation of fetcher function of the solid-js resource?