Devour/devour_data/docs/data-fetching-7063d818.json

{
  "id": "7063d8184bdb1b98f6f6d18a",
  "source": "solid:signals",
  "type": "github-document",
  "title": "data-fetching",
  "content": "---\ntitle: Data fetching\nuse_cases: \u003e-\n  api calls, database queries, loading states, error handling, preloading data,\n  client fetching, orm integration\ntags:\n  - fetch\n  - data\n  - api\n  - async\n  - loading\n  - query\n  - database\nversion: '1.0'\ndescription: \u003e-\n  Master data fetching in SolidStart with practical examples. Handle loading\n  states, errors, preloading, and database queries.\n---\n\nThis guide provides practical examples of common data-fetching tasks in SolidStart.\n\nHere's an example showing how to create a [`query`](/solid-router/reference/data-apis/query) and access its data with the [`createAsync` primitive](/solid-router/reference/data-apis/create-async):\n\n```tsx tab title=\"TypeScript\"\n// src/routes/index.tsx\nimport { For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\"\n// src/routes/index.jsx\nimport { For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n## Showing loading UI\n\nTo show a loading UI during data fetching:\n\n1. Import [`Suspense`](/reference/components/suspense) from `solid-js`.\n2. Wrap your data rendering in `\u003cSuspense\u003e`, and use the `fallback` prop to show a component during data fetching.\n\n```tsx tab title=\"TypeScript\" {14} {16}\n// src/routes/index.tsx\nimport { Suspense, For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\u003c/Suspense\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\" {14} {16}\n// src/routes/index.jsx\nimport { Suspense, For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\u003c/Suspense\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n## Handling errors\n\nTo show a fallback UI if the data fetching fails:\n\n1. Import [`ErrorBoundary`](/reference/components/error-boundary) from `solid-js`.\n2. Wrap the data rendering in `\u003cErrorBoundary\u003e`, and use the `fallback` prop to show a component if an error occurs.\n\n```tsx tab title=\"TypeScript\" {14} {18}\n// src/routes/index.tsx\nimport { ErrorBoundary, Suspense, For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\t\u003c/Suspense\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\" {14} {18}\n// src/routes/index.jsx\nimport { ErrorBoundary, Suspense, For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\t\u003c/Suspense\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n## Preloading data\n\nTo preload data before a route renders:\n\n1. Export a `route` object with a [`preload`](/solid-router/reference/preload-functions/preload) function.\n2. Run your query inside the `preload` function.\n3. Use the query as usual in your component.\n\n```tsx tab title=\"TypeScript\" {10-12}\n// src/routes/index.tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { query, createAsync, type RouteDefinition } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport const route = {\n\tpreload: () =\u003e getPosts(),\n} satisfies RouteDefinition;\n\nexport default function Page() {\n\tconst post = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003ch1\u003e{post().title}\u003c/h1\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\" {10-12}\n// src/routes/index.jsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPosts = query(async () =\u003e {\n\tconst posts = await fetch(\"https://my-api.com/posts\");\n\treturn await posts.json();\n}, \"posts\");\n\nexport const route = {\n\tpreload: () =\u003e getPosts(),\n};\n\nexport default function Page() {\n\tconst post = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003ch1\u003e{post().title}\u003c/h1\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Passing parameters to queries\n\nWhen creating a query that accepts parameters, define your query function to take any number of parameters:\n\n```tsx tab title=\"TypeScript\" {5} {11} {16}\n// src/routes/posts/[id]/index.tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { query, createAsync, type RouteDefinition } from \"@solidjs/router\";\n\nconst getPost = query(async (id: string) =\u003e {\n\tconst post = await fetch(`https://my-api.com/posts/${id}`);\n\treturn await post.json();\n}, \"post\");\n\nexport const route = {\n\tpreload: ({ params }) =\u003e getPost(params.id),\n} satisfies RouteDefinition;\n\nexport default function Page() {\n\tconst postId = 1;\n\tconst post = createAsync(() =\u003e getPost(postId));\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003ch1\u003e{post().title}\u003c/h1\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\" {5} {11} {16}\n// src/routes/posts/[id]/index.jsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getPost = query(async (id) =\u003e {\n\tconst post = await fetch(`https://my-api.com/posts/${id}`);\n\treturn await post.json();\n}, \"post\");\n\nexport const route = {\n\tpreload: ({ params }) =\u003e getPost(params.id),\n};\n\nexport default function Page() {\n\tconst postId = 1;\n\tconst post = createAsync(() =\u003e getPost(postId));\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003ch1\u003e{post().title}\u003c/h1\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Using a database or an ORM\n\nTo safely interact with your database or ORM in a query, use a [server function](/solid-start/reference/server/use-server):\n\n```tsx tab title=\"TypeScript\" {7-8}\n// src/routes/index.tsx\nimport { For, ErrorBoundary } from \"solid-js\";\nimport { query, createAsync, type RouteDefinition } from \"@solidjs/router\";\nimport { db } from \"~/lib/db\";\n\nconst getPosts = query(async () =\u003e {\n\t\"use server\";\n\treturn await db.from(\"posts\").select();\n}, \"posts\");\n\nexport const route = {\n\tpreload: () =\u003e getPosts(),\n} satisfies RouteDefinition;\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\" {7-8}\n// src/routes/index.jsx\nimport { For, ErrorBoundary } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\nimport { db } from \"~/lib/db\";\n\nconst getPosts = query(async () =\u003e {\n\t\"use server\";\n\treturn await db.from(\"posts\").select();\n}, \"posts\");\n\nexport const route = {\n\tpreload: () =\u003e getPosts(),\n};\n\nexport default function Page() {\n\tconst posts = createAsync(() =\u003e getPosts());\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n## Fetching data on the client\n\nTo fetch data only on the client, use the [`createResource`](/reference/basic-reactivity/create-resource) primitive:\n\n```tsx tab title=\"TypeScript\" {5-8} {13}\n// src/routes/index.tsx\nimport { createResource, ErrorBoundary, Suspense, For } from \"solid-js\";\n\nexport default function Page() {\n\tconst [posts] = createResource(async () =\u003e {\n\t\tconst posts = await fetch(\"https://my-api.com/posts\");\n\t\treturn await posts.json();\n\t});\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\t\u003c/Suspense\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\n```jsx tab title=\"JavaScript\" {5-8} {13}\n// src/routes/index.jsx\nimport { createResource, ErrorBoundary, Suspense, For } from \"solid-js\";\n\nexport default function Page() {\n\tconst [posts] = createResource(async () =\u003e {\n\t\tconst posts = await fetch(\"https://my-api.com/posts\");\n\t\treturn await posts.json();\n\t});\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t\u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e\n\t\t\t\t\u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\t\t\t\t\u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\t\u003c/Suspense\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/ul\u003e\n\t);\n}\n```\n\nSee the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information.\n\n:::note[Advanced Data Handling]\nFor advanced features like automatic background re-fetching or infinite queries, you can use [TanStack Query](https://tanstack.com/query/latest/docs/framework/solid/overview).\n:::",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/guides/data-fetching.mdx",
  "metadata": {
    "path": "src/routes/solid-start/guides/data-fetching.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 10428,
    "source_type": "github"
  },
  "hash": "4ca56ada11c75f9676fa6c41ff021afdb5290eee46a09e814f83040c79b3895d",
  "timestamp": "2026-02-23T11:43:00.194149051+01:00"
}