SolidJS•12mo ago

createResource does not trigger suspense when its first-argument signal changes

I have a modal component, with its open state managed by a signal. I want to fetch the data that should be displayed in the modal only once the modal is opened by the user and display a loading message while data is still loading. However, Suspense is not triggered in my case, and I don't really understand why. Isn't it supposed to be triggered in this case?

function MyComp(props: { id: string }) {
  const [open, setOpen] = createSignal(false);
  const [data] = createResource(open, () => load(props.id), {});

  return (
    <Dialog open={open()} onOpenChange={({ open }) => setOpen(open)}>
      <Suspense fallback="Loading...">
        <DialogContent data={data()} />
      </Suspense>
    </Dialog>
  );
}

function MyComp(props: { id: string }) {
  const [open, setOpen] = createSignal(false);
  const [data] = createResource(open, () => load(props.id), {});

  return (
    <Dialog open={open()} onOpenChange={({ open }) => setOpen(open)}>
      <Suspense fallback="Loading...">
        <DialogContent data={data()} />
      </Suspense>
    </Dialog>
  );
}

4 Replies

foolswisdom•12mo ago

You say it isn't triggered - what is the behavior you're seeing? You're not seeing the fallback?

ErikOP•12mo ago

@foolswisdom Exactly, I'm not seeing the fallback. I'm logging data() in a createEffect, I'm seeing undefined and when I open the modal, it switches to the data returned by the server after some delay, but suspense is not triggered/no loading fallback.

deluksic•12mo ago

~~falsy values do not trigger the resource fetcher afaik. You should use an object like { open: boolean } as the return value of the source~~

createResource(()=>({ open: open() }), ({open}) => ...)

createResource(()=>({ open: open() }), ({open}) => ...)

Otonashi•12mo ago

more likely than not the pattern in use by Dialog and DialogContent means that the read is not executing under suspense the solution depends on the implementation but reading and discarding data anywhere inside suspense but outside DialogContent ~~should~~ might work; be careful not to somehow cause DialogContent to rerun though eta: ideally suspense should be within DialogContent but it doesn't seem like that's possible here

Gaming

Programming

createResource does not trigger suspense when its first-argument signal changes