Devour/devour_data/docs/create-async.json

{
  "id": "d541b637f76c855844cdf477",
  "source": "solid:signals",
  "type": "github-document",
  "title": "create-async",
  "content": "---\ntitle: createAsync\nuse_cases: \u003e-\n  data fetching, async operations, suspense boundaries, loading states, api\n  calls, ssr data\ntags:\n  - async\n  - suspense\n  - data-fetching\n  - loading\n  - promises\n  - ssr\nversion: \"1.0\"\ndescription: \u003e-\n  Transform promises into reactive signals with createAsync. Handle async data\n  with Suspense and automatic loading states.\n---\n\nThe `createAsync` primitive manages asynchronous data fetching by tracking the result of a promise-returning function.\n\n:::note\n`createAsync` is currently a thin wrapper over `createResource`.\nWhile `createResource` offers similar functionality, **`createAsync` is the recommended primitive for most asynchronous data fetching**.\nIt is intended to be the standard async primitive in a future Solid 2.0 release.\n:::\n\n## Import\n\n```tsx\nimport { createAsync } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction createAsync\u003cT\u003e(\n\tfn: (prev: T) =\u003e Promise\u003cT\u003e,\n\toptions: {\n\t\tname?: string;\n\t\tinitialValue: T;\n\t\tdeferStream?: boolean;\n\t}\n): AccessorWithLatest\u003cT\u003e;\n\nfunction createAsync\u003cT\u003e(\n\tfn: (prev: T | undefined) =\u003e Promise\u003cT\u003e,\n\toptions?: {\n\t\tname?: string;\n\t\tinitialValue?: T;\n\t\tdeferStream?: boolean;\n\t}\n): AccessorWithLatest\u003cT | undefined\u003e;\n```\n\n## Parameters\n\n### `fetcher`\n\n- **Type:** `(prev: T | undefined) =\u003e Promise\u003cT\u003e`\n- **Required:** Yes\n\nAn asynchronous function or a function that returns a `Promise`.\nThe resolved value of this `Promise` is what `createAsync` tracks.\nThis function is reactive and will automatically re-execute if any of its dependencies change.\n\n### `options`\n\n- **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean; }`\n- **Required:** No\n\nAn object for configuring the primitive.\nIt has the following properties:\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nA name for the resource, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools).\n\n#### `initialValue`\n\n- **Type:** `T`\n- **Required:** No\n\nThe initial value of the returned signal before the fetcher finishes executing.\n\n#### `deferStream`\n\n- **Type:** `boolean`\n- **Required:** No\n\nIf `true`, [streaming](/solid-router/data-fetching/streaming) will be deferred until the fetcher finishes executing.\n\n## Return value\n\n`createAsync` returns a derived signal that contains the resolved value of the fetcher.\n\nWhile the fetcher is executing for the first time, unless an `initialValue` is specified, the signal's value is `undefined`.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { createAsync, query } from \"@solidjs/router\";\n\nconst getCurrentUser = query(async () =\u003e {\n\t// ... Fetches the current authenticated user from the server.\n}, \"currentUser\");\n\nfunction UserProfile() {\n\tconst user = createAsync(() =\u003e getCurrentUser());\n\n\treturn \u003cdiv\u003e{user()?.name}\u003c/div\u003e;\n}\n```\n\n### With parameter\n\n```tsx\nimport { createAsync, query } from \"@solidjs/router\";\n\nconst getInvoiceQuery = query(async (invoiceId: string) =\u003e {\n\t// ... Fetches the invoice details from the server.\n}, \"invoice\");\n\nfunction InvoiceDetails(props: { invoiceId: string }) {\n\tconst invoice = createAsync(() =\u003e getInvoiceQuery(props.invoiceId));\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch2\u003eInvoice #{invoice()?.number}\u003c/h2\u003e\n\t\t\t\u003cp\u003eTotal: ${invoice()?.total}\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### With error handling and pending state\n\n```tsx\nimport { createAsync, query } from \"@solidjs/router\";\nimport { Suspense, ErrorBoundary, For } from \"solid-js\";\n\nconst getAllRecipesQuery = query(async () =\u003e {\n\t// ... Fetches the recipes from the server and throws an error if an issue occurred.\n}, \"recipes\");\n\nfunction Recipes() {\n\tconst recipes = createAsync(() =\u003e getAllRecipesQuery());\n\n\treturn (\n\t\t\u003cErrorBoundary fallback={\u003cp\u003eCouldn't fetch any recipes!\u003c/p\u003e}\u003e\n\t\t\t\u003cSuspense fallback={\u003cp\u003eFetching recipes...\u003c/p\u003e}\u003e\n\t\t\t\t\u003cFor each={recipes()}\u003e\n\t\t\t\t\t{(recipe) =\u003e (\n\t\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\t\u003ch3\u003e{recipe.name}\u003c/h3\u003e\n\t\t\t\t\t\t\t\u003cp\u003eCook time: {recipe.time}\u003c/p\u003e\n\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t)}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/Suspense\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```\n\n## Related\n\n- [`query`](/solid-router/reference/data-apis/query)\n- [`\u003cSuspense\u003e`](/reference/components/suspense)\n- [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/create-async.mdx",
  "metadata": {
    "path": "src/routes/solid-router/reference/data-apis/create-async.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 4163,
    "source_type": "github"
  },
  "hash": "8eadcf28a1b2d3de9057a4dc2cb8d3fe8a9bd03d5d1ba346f10aaba2b4456458",
  "timestamp": "2026-02-23T11:43:00.192676694+01:00"
}