Solid createResource Helper

v1.0.0

SolidJS createResource scaffold — fetcher, source signal, mutate, refetch patterns.

Resource name

API endpoint

Signal source (reactive param)

SolidJS createResource

// SolidJS createResource pattern
import { createSignal, createResource, Show, Suspense } from "solid-js";

// Fetcher function
async function fetchUser(userId: string) {
  const url = "/api/users/:id".replace(":" + userId, "${" + userId + "}");
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json() as Promise<User>;
}

// Component
function UserComponent() {
  const [userId] = createSignal<string>();
  const [user, { refetch }] = createResource(userId, fetchUser);
  return <Show when={user()}>{(data) => <pre>{JSON.stringify(data, null, 2)}</pre>}</Show>;
}