0

I have trouble trying to make that code work in solidjs.

What I want is basically something similar to a Suspense and ErrorBoundary that are present in the api of solidjs but the two at the same time with a component that only receives the signal of a resource and handles the error showing an alert component.

import { Component, Show, children} from "solid-js";
import Alert from "./Alert";

const AsyncHandle: Component = (props) => {
  const c = children(() => props.children);
  return (
    <Show
      when={!props.data.error}
      fallback={
        (props.data.error && <Alert severity="warning">                   {props.data.error?.message}</Alert>) ||
         "loading..."
      }
    >
      {c}
    </Show>
  );
};

export default AsyncHandle;
akerbeltz
  • 13
  • 5

1 Answers1

0

What you are asking is way more complex to fit in a single component, because logic behind a Suspense requires Context API and request tracking. Checkout the discussion we had on Suspense API for the answer:

https://github.com/solidjs/solid/discussions/1009

The code in discussion deals with the cases where you start fetching before component mounts. If you are going start fetching when component mounts, you don't need any of it, use this pattern:

https://stackoverflow.com/a/74590574/7134134

snnsnn
  • 10,486
  • 4
  • 39
  • 44
  • The solution number 6-"Providing onError fallbacks to Suspense" would be a good idea no? I'll look more into it, it seems a lot more complicated than i thought at the beginning as you said – akerbeltz Apr 17 '23 at 21:56
  • Yes. Remember, code in discussion deals with the cases where you start fetching before component mounts. If you are going start fetching when component mounts, you don't need any of it, use this pattern: https://stackoverflow.com/a/74590574/7134134 – snnsnn Apr 19 '23 at 09:20