Erik Posts - Answer Overflow

Erik

•Created by Erik on 6/20/2024 in #support

How to opt-out of re-triggering page-level resources after server action invocation

I'm wondering if I can opt-out of the default behavior of re-triggering page-level resources created with createAsync and cache after a server action invocation. I want more control and explicitly opt-in to cache invalidation. Is this possible with SolidStart or solid-router? For example, in the code below, loadHelloWorld is being executed after each submission of runServerAction even though no cache invalidation is required as the data on the page will not change as a result of the server action.

const runServerAction = action(async (data: unknown) => {
    "use server";
    console.log(data);
}, "server-action");

const loadHelloWorld = cache(async () => {
  console.log("Re-run loader")
  return "Hello World"
}, "load-home");

export const route = {
    load: () => loadHelloWorld,
} satisfies RouteDefinition;

export default function Home() {
    const data = createAsync(() => loadHelloWorld());
    return (
        <main>
            <Title>Hello World</Title>
            <h1>{data()}</h1>
            <form method="post" action={runServerAction}>
             <button type="submit">Run server action</button>
            </form>
        </main>
    );
}

const runServerAction = action(async (data: unknown) => {
    "use server";
    console.log(data);
}, "server-action");

const loadHelloWorld = cache(async () => {
  console.log("Re-run loader")
  return "Hello World"
}, "load-home");

export const route = {
    load: () => loadHelloWorld,
} satisfies RouteDefinition;

export default function Home() {
    const data = createAsync(() => loadHelloWorld());
    return (
        <main>
            <Title>Hello World</Title>
            <h1>{data()}</h1>
            <form method="post" action={runServerAction}>
             <button type="submit">Run server action</button>
            </form>
        </main>
    );
}

3 replies

SSolidJS

•Created by Erik on 1/23/2024 in #support

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>
  );
}

8 replies

Gaming

Programming