Skip to content
LuoForge/Tungsten
Components/QueryError·

QueryError

Data-fetch error state — renders an error Alert with an optional retry button.

Forwards ref through to the underlying Alert root <div role="alert">.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { QueryError } from '@hey-mike/tungsten';
import { QueryError } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/query-error/page.tsx

import { QueryError } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function QueryErrorSnapshot() {
  return (
    <VariantGrid
      title="QueryError"
      variants={[
        { label: 'default', node: <QueryError message="Could not load data." /> },
      ]}
    />
  );
}

import { QueryError } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function QueryErrorSnapshot() {
  return (
    <VariantGrid
      title="QueryError"
      variants={[
        { label: 'default', node: <QueryError message="Could not load data." /> },
      ]}
    />
  );
}

Props

Surface specific to <QueryError />.

PropTypeDefaultDescription
messagestringSomething went wrong. Please try again.—
titlestringFailed to load—
onRetry(() => void)——
iconReactElement<unknown, string | JSXElementConstructor<any>> | null—Override the default error icon. Pass null to suppress the icon entirely.

Source