createRouteData

createRouteData allows you to manage async data fetching
tsx
const data = createRouteData(getStudents);
tsx
const data = createRouteData(getStudents);

Usage

Fetching data from an API

createRouteData is a primitive for managing async data fetching. It is a light wrapper over createResource that is router away so it can handle data refetching. The simplest way to use it is to fetch data from an API.

tsx
import { createRouteData } from "solid-start";
 
export function routeData() {
  return createRouteData(async () => {
    const response = await fetch("https://hogwarts.deno.dev/students");
    return (await response.json());
  });
}
tsx
import { createRouteData } from "solid-start";
 
export function routeData() {
  return createRouteData(async () => {
    const response = await fetch("https://hogwarts.deno.dev/students");
    return (await response.json());
  });
}

Fetching data with a key

Often though we want to be able set a key for our routeData both to act as a parameter and to allow easy invalidation. The fetcher function does not reactively track so you must use this option if you wish the route data to update. A "falsy" value turns off data fetching.

tsx
import { createRouteData, RouteDataArgs } from "solid-start";
 
export function routeData({ params } : RouteDataArgs) {
  return createRouteData(
    async key => {
      const response = await fetch(`https://hogwarts.deno.dev/${key[0]}/${key[1]}`);
      return (await response.json());
    },
    { key: () => ["students", params.id] }
  );
}
tsx
import { createRouteData, RouteDataArgs } from "solid-start";
 
export function routeData({ params } : RouteDataArgs) {
  return createRouteData(
    async key => {
      const response = await fetch(`https://hogwarts.deno.dev/${key[0]}/${key[1]}`);
      return (await response.json());
    },
    { key: () => ["students", params.id] }
  );
}

Setting the reconcile key

createRouteData uses a Solid Store under the hood to store its data. This means that when data is refetched it attempts to diff the data to trigger only the finest-grained updates. By default it is configured to key data to id. If your backend uses a different field you can set it:

tsx
import { createRouteData } from "solid-start";
 
export function routeData() {
  return createRouteData(
    async () => {
      const response = await fetch("https://hogwarts.deno.dev/students");
      return (await response.json());
    },
    {
      reconcileOptions: {
        key: "_id"
      }
    }
  );
}
tsx
import { createRouteData } from "solid-start";
 
export function routeData() {
  return createRouteData(
    async () => {
      const response = await fetch("https://hogwarts.deno.dev/students");
      return (await response.json());
    },
    {
      reconcileOptions: {
        key: "_id"
      }
    }
  );
}

Reference

createRouteData(fetcher, options)

Call createRouteData() .

tsx
import { createRouteData } from "solid-start";
 
export function routeData() {
  return createRouteData(getStudents);
}
tsx
import { createRouteData } from "solid-start";
 
export function routeData() {
  return createRouteData(getStudents);
}

Options

  • key (string | Array, default: true): Parameters for the route data to key by. A falsy value prevents fetching.
  • initialValue (unknown, default undefined): Initial value of the routeData
  • deferStream (boolean, default false): Prevent streaming render from flushing until complete
  • reconcileOptions
    • key (string, default "id"): The property to use as a key for data diffing.
    • merge (boolean, default false): When true diff deep merges unrecognized values instead of replacing them.

Returns

A Solid Resource. An accessor that returns the data that additionally has these reactive properties:

  • state ("unresolved" | "pending" | "ready" | "refreshing" | "errored"): Current state of the route data.
  • loading (boolean): Indicates if it is loading.
  • error (unknown): Contains the error if it is currently errored.
  • latest (unknown): A way of reading the current value without triggering Suspense.