mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
4.1 KiB
JSON
17 lines
4.1 KiB
JSON
{
|
|
"id": "dad131e68319e4ddabca57bf",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "queries",
|
|
"content": "---\ntitle: \"Queries\"\n---\n\nQueries are the core building blocks for data fetching in Solid Router.\nThey provide an elegant solution for managing data fetching.\n\n## Defining queries\n\nThey are defined using the [`query` function](/solid-router/reference/data-apis/query).\nIt wraps the data-fetching logic and extends it with powerful capabilities like [request deduplication](#deduplication) and [automatic revalidation](#revalidation).\n\nThe `query` function takes two parameters: a **fetcher** and a **name**.\n\n- The **fetcher** is an asynchronous function that fetches data from any source, such as a remote API.\n- The **name** is a unique string used to identify the query.\n When a query is called, Solid Router uses this name and the arguments passed to the query to create a unique key, which is used for the internal deduplication mechanism.\n\n```tsx\nimport { query } from \"@solidjs/router\";\n\nconst getUserProfileQuery = query(async (userId: string) =\u003e {\n\tconst response = await fetch(\n\t\t`https://api.example.com/users/${encodeURIComponent(userId)}`\n\t);\n\tconst json = await response.json();\n\n\tif (!response.ok) {\n\t\tthrow new Error(json?.message ?? \"Failed to load user profile.\");\n\t}\n\n\treturn json;\n}, \"userProfile\");\n```\n\nIn this example, the defined query fetches a user's profile from an API.\nIf the request fails, the fetcher will throw an error that will be caught by the nearest [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) in the component tree.\n\n## Using queries in components\n\nDefining a query does not by itself fetch any data.\nTo access its data, the query can be used with the [`createAsync` primitive](/solid-router/reference/data-apis/create-async).\n`createAsync` takes an asynchronous function, such as a query, and returns a signal that tracks its result.\n\n```tsx\nimport { For, Show } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getArticlesQuery = query(async () =\u003e {\n\t// ... Fetches a list of articles from an API.\n}, \"articles\");\n\nfunction Articles() {\n\tconst articles = createAsync(() =\u003e getArticlesQuery());\n\n\treturn (\n\t\t\u003cShow when={articles()}\u003e\n\t\t\t\u003cFor each={articles()}\u003e{(article) =\u003e \u003cp\u003e{article.title}\u003c/p\u003e}\u003c/For\u003e\n\t\t\u003c/Show\u003e\n\t);\n}\n```\n\nIn this example, `createAsync` is used to call the query.\nOnce the query completes, `articles` holds the result, which is then rendered.\n\n:::tip\nWhen working with complex data types, such as arrays or deeply nested objects, the [`createAsyncStore` primitive](/solid-router/reference/data-apis/create-async-store) offers a more ergonomic and performant solution.\nIt works like `createAsync`, but returns a [store](/concepts/stores) for easier state management..\n:::\n\n## Deduplication\n\nA key feature of queries is their ability to deduplicate requests, preventing redundant data fetching in quick succession.\n\nOne common use case is preloading: when a user hovers over a link, the application can begin preloading the data for the destination page.\nIf the user then clicks the link, the query has already been completed, and the data is available instantly without triggering another network request.\nThis mechanism is fundamental to the performance of Solid Router applications.\n\nDeduplication also applies when multiple components on the same page use the same query.\nAs long as at least one component is actively using the query, Solid Router will reuse the cached result instead of refetching the data.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/queries.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/data-fetching/queries.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3412,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "8cc3cc93b643f4a57f243bca2a4a5f3c1e4c7c52028c98bc1dc067688fc870c5",
|
|
"timestamp": "2026-02-23T11:43:00.19197234+01:00"
|
|
} |