{
  "id": "8c011a0652c465d5ac7d2402",
  "source": "solid:signals",
  "type": "github-document",
  "title": "handle-error-and-loading-states",
  "content": "---\ntitle: \"Handle pending and error states\"\n---\n\nThe `createAsync` primitive is designed to work with Solid's native components for managing asynchronous states.\nIt reports its pending state to the nearest [`\u003cSuspense\u003e` boundary](/reference/components/suspense) to display loading fallbacks, and propagate errors to an [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) for handling and displaying error messages.\n\n```tsx\nimport { Suspense, ErrorBoundary, For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getNewsQuery = query(async () =\u003e {\n\t// ... Fetches the latest news from an API.\n}, \"news\");\n\nfunction NewsFeed() {\n\tconst news = createAsync(() =\u003e getNewsQuery());\n\n\treturn (\n\t\t\u003cErrorBoundary fallback={\u003cp\u003eCould not fetch news.\u003c/p\u003e}\u003e\n\t\t\t\u003cSuspense fallback={\u003cp\u003eLoading news...\u003c/p\u003e}\u003e\n\t\t\t\t\u003cul\u003e\n\t\t\t\t\t\u003cFor each={news()}\u003e{(item) =\u003e \u003cli\u003e{item.headline}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\t\u003c/ul\u003e\n\t\t\t\u003c/Suspense\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/how-to/handle-error-and-loading-states.mdx",
  "metadata": {
    "path": "src/routes/solid-router/data-fetching/how-to/handle-error-and-loading-states.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 959,
    "source_type": "github"
  },
  "hash": "8566abb8a9feb6d861bd45c308ba047091119f1b89eb707480cc5147dc719a84",
  "timestamp": "2026-02-23T11:43:00.191908841+01:00"
}