mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
4.6 KiB
JSON
17 lines
4.6 KiB
JSON
{
|
|
"id": "ad3277f87472a764a5eb7075",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "create-async-store",
|
|
"content": "---\ntitle: createAsyncStore\nuse_cases: \u003e-\n large datasets, reactive stores, model data, fine-grained updates, complex\n state\ntags:\n - async\n - stores\n - reactive\n - data-fetching\n - state\nversion: '1.0'\ndescription: \u003e-\n Create deeply reactive stores from async data sources for fine-grained updates\n on large datasets and complex model structures.\n---\n\nThe `createAsyncStore` primitive manages asynchronous data fetching by tracking the result of a promise-returning function in a [store](/concepts/stores).\n\nThe main difference from [createAsync](/solid-router/reference/data-apis/create-async) is its use of reconciliation: when new data arrives, it intelligently merges with the existing store, updating only changed fields while preserving unchanged state.\n\n## Import\n\n```tsx\nimport { createAsyncStore } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction createAsyncStore\u003cT\u003e(\n fn: (prev: T) =\u003e Promise\u003cT\u003e,\n options: {\n name?: string;\n initialValue: T;\n deferStream?: boolean;\n reconcile?: ReconcileOptions;\n }\n): AccessorWithLatest\u003cT\u003e;\n\nfunction createAsyncStore\u003cT\u003e(\n fn: (prev: T | undefined) =\u003e Promise\u003cT\u003e,\n options?: {\n name?: string;\n initialValue?: T;\n deferStream?: boolean;\n reconcile?: ReconcileOptions;\n }\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 `createAsyncStore` 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; reconcile?: ReconcileOptions; }`\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 store before the fetcher resolves.\n\n#### `deferStream`\n\n- **Type:** `boolean`\n- **Required:** No\n\nIf `true`, [streaming](/solid-router/data-fetching/streaming) will be deferred until the resource has resolved.\n\n#### `reconcile`\n\n- **Type:** `ReconcileOptions`\n- **Required:** No\n\n[Options](/reference/store-utilities/reconcile#options) passed directly to the `reconcile` function.\nIt controls how new data is merged with the existing store.\n\n## Return value\n\n`createAsyncStore` returns a derived signal that contains the resolved value of the fetcher as a store.\n\nWhile the fetcher is executing for the first time, unless an `initialValue` is specified, the store's value is `undefined`.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { For, createSignal } from \"solid-js\";\nimport { createAsyncStore, query } from \"@solidjs/router\";\n\nconst getNotificationsQuery = query(async (unreadOnly: boolean) =\u003e {\n\t// ... Fetches the list of notifications from the server.\n}, \"notifications\");\n\nfunction Notifications() {\n\tconst [unreadOnly, setUnreadOnly] = createSignal(false);\n\tconst notifications = createAsyncStore(() =\u003e\n\t\tgetNotificationsQuery(unreadOnly())\n\t);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setUnreadOnly(!unreadOnly())}\u003e\n\t\t\t\tToggle unread\n\t\t\t\u003c/button\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cFor each={notifications()}\u003e\n\t\t\t\t\t{(notification) =\u003e (\n\t\t\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\t\t\u003cdiv\u003e{notification.message}\u003c/div\u003e\n\t\t\t\t\t\t\t\u003cdiv\u003e{notification.user.name}\u003c/div\u003e\n\t\t\t\t\t\t\u003c/li\u003e\n\t\t\t\t\t)}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/create-async-store.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/reference/data-apis/create-async-store.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3617,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "0ed592b0753c0f9fdeabc4b7ec2d436b65cfe324f425a17f2252212b2f202212",
|
|
"timestamp": "2026-02-23T11:43:00.19263741+01:00"
|
|
} |