Data fetching

SolidStart is built on top of Solid and uses Solid Router by default. This means you can leverage their respective data-fetching primitives within SolidStart. Since SolidStart itself provides minimal data-fetching APIs, most functionality comes from Solid and Solid Router.

This guide provides practical examples of common data-fetching tasks using these primitives.

Here's a simple example:

In this example, a query is created. In order to access it's data within the component, the createAsync primitive was used.

---

Showing loading UI

To show a loading UI during data-fetching:

1. Import Suspense from solid-js.
2. Wrap your data rendering in <Suspense>, and use the fallback prop to show a component during data fetching.

---

Handling errors

To show a fallback UI if the data-fetching fails:

1. Import ErrorBoundary from solid-js.
2. Wrap the data rendering in <ErrorBoundary>, and use the fallback prop to show a component if an error occurs.

---

Preloading data

Data fetching can be optimized during user navigation by preloading the data:

1. Export a route object with a preload function.
2. Run your query inside the preload function.
3. Use the query as usual in your component.

---

Passing parameters to queries

When creating a query that accepts parameters, define your query function to take any number of arguments:

---

Using a database or an ORM

To safely interact with your database or ORM in a query, ensure it's server-only by adding "use server" as the first line of your query:

---

Fetching data on the client

To fetch data only on the client, use the createResource primitive:

See the createResource API reference for more information.