SolidJS•12mo ago

ErrorBoundary explanation

Can someone explain why this first one works and other doesnt: 1.

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";

const Comp = () => {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return <p>{state.data}</p>;
};

function Test() {
  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading...">
        <Comp />
      </Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";

const Comp = () => {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return <p>{state.data}</p>;
};

function Test() {
  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading...">
        <Comp />
      </Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";




function Test() {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading..."><p>{state.data}</p></Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";




function Test() {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading..."><p>{state.data}</p></Suspense>
    </ErrorBoundary>
  );
}

export default Test;

3 Replies

Massukka•12mo ago

It would be quite cumbersome to move everything to new component everytime I want to use solid query

REEEEE•12mo ago

My guess is that createQuery runs immediately at first. Since the query is run outside of the ErrorBoundary in the second example, It doesn't hit the boundary. While in the first example, it's in a component that has the query and it runs under the boundary

Massukka•12mo ago

Yeah, it just makes me wonder when you are supposed to use errorboundaries since it's required to make separate child component for pretty much every query/component combination

Gaming

Programming

ErrorBoundary explanation