SolidJS•3w ago

Prevent queries revalidation if error in action

Hi. I'm a little lost with the revalidate function. Is it a server or client function ? I would like to prevent all queries revalidation if I have an error in my action.

const myaction = action(async (formdata) => {
  "use server";
  try {
    
  } catch (error) {
    // Prevent single flight revalidation here ?
    return new Error("oups")
  }
})

const myaction = action(async (formdata) => {
  "use server";
  try {
    
  } catch (error) {
    // Prevent single flight revalidation here ?
    return new Error("oups")
  }
})

12 Replies

peerreynders•3w ago

For background: - revalidate acts on the client side query values. - Contrary to the docs revalidate is for use outside of actions. - By default an action will revalidate all active querys - (afaik) Single flight mutation use the route preload to trigger querys. - To narrow action revalidation use reload which also opts out of single flight mutation. Based on this I'd try actually throwing the error—that may make it bail before it invalidates everything.

reload - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

GitHub

solid-router/src/data/action.ts at 3c214ce2ceb9b7d9d39d143229a8c614...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

mtt-4242OP•3w ago

Thanks for the response. From what I see, it's not possible de chose to single flight or not in action or the useAction (but that could be cool) I see I can segregate route preload by intent. But I need to investigate a bit more to really understand what each keyword means https://github.com/solidjs/solid-router/blob/main/src%2Ftypes.ts#L77

GitHub

solid-router/src/types.ts at main · solidjs/solid-router

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

peerreynders•3w ago

- "initial" - the route is being initially shown (ie page load) - "native" - navigate originated from the browser (eg back/forward) - "navigate" - navigate originated from the router (eg call to navigate or anchor clicked) - "preload" - not navigating, just preloading (eg link hover)

https://github.com/solidjs/solid-router/tree/main?tab=readme-ov-file#preload-functions

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

mtt-4242OP•3w ago

Thanks 👍

peerreynders•3w ago

chose to single flight or not in action

As far as I'm aware single flight is reserved for actions that - provide a preload and - don't use revalidate options on the reload or json response helpers. Of course that could change in the future.

json - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

Madaxen86•3w ago

Hey Peer, reload does not opt out of single flight mutations. It’s the solution for sfm if you want to stay on the same page. And single flight mutations also work when revalidation keys are provided to the response helpers. They target route just has to have the mutated and revalidated queries in the preload.

peerreynders•2w ago

So things have changed since https://discord.com/channels/722131463138705510/1243132814170394644/1243474984433614899 So - Only querys that are in the preload can be in a single flight mutation. - querys which are not preloaded will never be in a single-flight mutation. - A non-narrowed action will single flight mutate for the preloaded querys but still trigger separate fetches for active querys that are not part of preload.

peerreynders•2w ago

server.ts

about.tsx

Madaxen86•2w ago

Yep, that’s what my tests imply. If I find time next week I’ll prepare a PR for the docs ~~But I tested only returning - not throwing.~~ There's no difference between throwand return so yes this is correct:

- Only querys that are in the preload can be in a single flight mutation. ✅ - querys which are not preloaded will never be in a single-flight mutation. ✅ - A non-narrowed action will single flight mutate for the preloaded querys but still trigger separate fetches for active querys that are not part of preload. ✅

peerreynders•2w ago

So it is possible to not revalidate anything:

// …
// --- five
const dataFive = query(() => {
  'use server';
  const name = 'data-five';
  const reason = dataReason();
  console.log(name, reason, time());

  return deferTask(() => ({ message: `${name}: ${reason}@${time()}` }));
}, 'data-five');

const actionFive = action(() => {
  'use server';
  const name = 'action-five';
  return deferTask(() => {
    const t = time();
    console.log(name, t);
    return json({ message: `Simulated error @${t}` }, { revalidate: [] });
  });
}, 'action-five');

//…
export default function About(_props: RouteSectionProps) {
  const [pending] = useTransition();

  //…
  const data5 = createAsync(() => dataFive());
  const submitFive = useSubmission(actionFive);
  const action5 = useAction(actionFive);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <div>Transition: {pending() ? 'pending' : 'idle'}</div>
      { //… }
      <div>Submit Five {submitFive.pending ? 'pending' : 'idle'}</div>
      <div style="margin-block: 2rem">
        { //… }
        <Suspense fallback={<div>Loading...</div>}>
          <Show
            when={submitFive.result}
            fallback={<div>{data5()?.message}</div>}
          >
            {(error) => <div style="color: red">{error().message}</div>}
          </Show>
        </Suspense>
      </div>
      { //… }
      <div>
        Doesn't revalidate
        <button
          onClick={() => {
            if (submitFive.result) submitFive.clear();
            action5();
          }}
        >
          Action Five
        </button>
      </div>
    </main>
  );
}

// …
// --- five
const dataFive = query(() => {
  'use server';
  const name = 'data-five';
  const reason = dataReason();
  console.log(name, reason, time());

  return deferTask(() => ({ message: `${name}: ${reason}@${time()}` }));
}, 'data-five');

const actionFive = action(() => {
  'use server';
  const name = 'action-five';
  return deferTask(() => {
    const t = time();
    console.log(name, t);
    return json({ message: `Simulated error @${t}` }, { revalidate: [] });
  });
}, 'action-five');

//…
export default function About(_props: RouteSectionProps) {
  const [pending] = useTransition();

  //…
  const data5 = createAsync(() => dataFive());
  const submitFive = useSubmission(actionFive);
  const action5 = useAction(actionFive);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <div>Transition: {pending() ? 'pending' : 'idle'}</div>
      { //… }
      <div>Submit Five {submitFive.pending ? 'pending' : 'idle'}</div>
      <div style="margin-block: 2rem">
        { //… }
        <Suspense fallback={<div>Loading...</div>}>
          <Show
            when={submitFive.result}
            fallback={<div>{data5()?.message}</div>}
          >
            {(error) => <div style="color: red">{error().message}</div>}
          </Show>
        </Suspense>
      </div>
      { //… }
      <div>
        Doesn't revalidate
        <button
          onClick={() => {
            if (submitFive.result) submitFive.clear();
            action5();
          }}
        >
          Action Five
        </button>
      </div>
    </main>
  );
}

peerreynders•2w ago

Now I'm starting to think that returning an Error instance as an action result to indicate an error is a bad idea because there is no way to suppress revalidations. At least sticking to json():

return json({ message: `Simulated error @${t}` }, { revalidate: [] });

return json({ message: `Simulated error @${t}` }, { revalidate: [] });

(it has to be an empty array; undefined or omitting the options entirely will make it behave like a vanilla action; reload works equivalently) revalidations can be suppressed. So back in January: https://discord.com/channels/722131463138705510/1329164943878258739/1331345420504399994 single flight mutations were the likely cause of my issue; I just kept forgetting that: - A vanilla action will by default revalidate all queries - so if the route has a preload that means that the action will be a single flight mutation. All I wanted, was to return an Error instance from the action, not cause an SMH and other revalidations. And apparently sometimes you can get lucky; you just can't count on it.

GitHub

strello/src/lib/index.ts at 9c9ae973d96cc045914e696757a1b5f31efc6fa...

Contribute to solidjs-community/strello development by creating an account on GitHub.

peerreynders•2w ago

There's no difference between throw and return so yes this is correct:

Are you sure? Because this code does not cause revalidations for me:

// …
// --- six
const dataSix = query(() => {
  'use server';
  const name = 'data-six';
  const reason = dataReason();
  console.log(name, reason, time());

  return deferTask(() => ({ message: `${name}: ${reason}@${time()}` }));
}, 'data-six');

const actionSix = action(() => {
  'use server';
  const name = 'action-six';
  return new Promise((_r, reject) => {
    setTimeout(() => {
      const t = time();
      console.log(name, t);
      reject(new Error(`Simulated error @${t}`));
    }, 1000);
  });
}, 'action-six');

// …
export default function About(_props: RouteSectionProps) {
  const [pending] = useTransition();
  // …
  const data6 = createAsync(() => dataSix());
  const submitSix = useSubmission(actionSix);
  const action6 = useAction(actionSix);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <div>Transition: {pending() ? 'pending' : 'idle'}</div>
      {/* … */}
      <div>Submit Six {submitSix.pending ? 'pending' : 'idle'}</div>
      <div style="margin-block: 2rem">
        {/* … */}
        <Suspense fallback={<div>Loading...</div>}>
          <Show when={submitSix.error} fallback={<div>{data6()?.message}</div>}>
            {(error) => <div style="color: red">{error().message}</div>}
          </Show>
        </Suspense>
      </div>
      {/* … */}
      <div>
        Doesn't revalidate
        <button
          onClick={() => {
            if (submitSix.error) submitSix.clear();
            action6();
          }}
        >
          Action Six
        </button>
      </div>
    </main>
  );
}

// …
// --- six
const dataSix = query(() => {
  'use server';
  const name = 'data-six';
  const reason = dataReason();
  console.log(name, reason, time());

  return deferTask(() => ({ message: `${name}: ${reason}@${time()}` }));
}, 'data-six');

const actionSix = action(() => {
  'use server';
  const name = 'action-six';
  return new Promise((_r, reject) => {
    setTimeout(() => {
      const t = time();
      console.log(name, t);
      reject(new Error(`Simulated error @${t}`));
    }, 1000);
  });
}, 'action-six');

// …
export default function About(_props: RouteSectionProps) {
  const [pending] = useTransition();
  // …
  const data6 = createAsync(() => dataSix());
  const submitSix = useSubmission(actionSix);
  const action6 = useAction(actionSix);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <div>Transition: {pending() ? 'pending' : 'idle'}</div>
      {/* … */}
      <div>Submit Six {submitSix.pending ? 'pending' : 'idle'}</div>
      <div style="margin-block: 2rem">
        {/* … */}
        <Suspense fallback={<div>Loading...</div>}>
          <Show when={submitSix.error} fallback={<div>{data6()?.message}</div>}>
            {(error) => <div style="color: red">{error().message}</div>}
          </Show>
        </Suspense>
      </div>
      {/* … */}
      <div>
        Doesn't revalidate
        <button
          onClick={() => {
            if (submitSix.error) submitSix.clear();
            action6();
          }}
        >
          Action Six
        </button>
      </div>
    </main>
  );
}

Gaming

Programming

Prevent queries revalidation if error in action

Did you find this page helpful?