CODEWITHSUNDEEP
jsxsolid-js
akerbeltz
akerbeltz

Reputation: 13

How to implement an AsyncHandle to wrap the handle error and loading of a resource in solidjs?

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;

Upvotes: 0

Views: 199

Answers (1)

snnsnn
snnsnn

Reputation: 13698

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

Upvotes: 0

Related Questions