メニュー
Handles asynchronous data fetching in SolidJS using createResource with Suspense integration. Use when fetching data from APIs, managing loading/error states, or implementing optimistic updates in SolidJS.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/IlyaGulya/claude-marketplace --skill solidjs-asyncコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | solidjs-async |
| description | Handles asynchronous data fetching in SolidJS using createResource with Suspense integration. Use when fetching data from APIs, managing loading/error states, or implementing optimistic updates in SolidJS. |
The primary primitive for async data fetching. Integrates with Suspense and ErrorBoundary.
import { createResource } from "solid-js";
const [data, { mutate, refetch }] = createResource(async () => {
const res = await fetch("/api/data");
return res.json();
});
const [userId, setUserId] = createSignal(1);
const [user] = createResource(userId, async (id) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
});
// Automatically refetches when userId changes
();
Source signal behavior:
false, null, or undefined — fetcher is NOT calledconst [searchQuery, setSearchQuery] = createSignal("");
// Only fetches when query is non-empty
const [results] = createResource(
() => searchQuery() || false, // falsy = skip fetch
async (query) => {
const res = await fetch(`/api/search?q=${query}`);
return res.json();
}
);
A resource has 5 states:
| State | resource() | .loading | .error | .latest | Description |
|---|---|---|---|---|---|
unresolved | undefined | false | undefined | undefined | Initial, fetcher not yet called |
pending | undefined | true | undefined | undefined | Fetching in progress |
ready | T | false | undefined | T | Successfully fetched |
refreshing | T | true | undefined | T | Re-fetching, previous value available |
errored | undefined | false | any | undefined | Fetch failed |
// Current value (undefined while loading)
const value = data();
// Loading state
const isLoading = data.loading;
// Error state
const error = data.error;
// Latest successful value (persists during refresh)
const latest = data.latest;
// Exact state
const state = data.state; // "unresolved" | "pending" | "ready" | "refreshing" | "errored"
latest keeps the previous successful value while refreshing. Useful for showing stale data during reload:
function UserList() {
const [users, { refetch }] = createResource(fetchUsers);
return (
<div>
<button onClick={refetch} disabled={users.loading}>
{users.loading ? "Refreshing..." : "Refresh"}
</button>
{/* Show previous data while refreshing instead of spinner */}
<For each={users.latest ?? []}>
{(user) => <div>{user.name}</div>}
</For>
</div>
);
}
const [todos, { mutate, refetch }] = createResource(fetchTodos);
// Optimistic update — immediately update local state without fetching
mutate(prev => [...(prev ?? []), newTodo]);
// Manual refresh — re-runs the fetcher
await refetch();
// refetch with info — passed to fetcher's info.refetching
await refetch("forced");
// In fetcher: async (source, { refetching }) => { if (refetching === "forced") ... }
createResource automatically triggers the nearest <Suspense> boundary when read.
import { createResource, Suspense } from "solid-js";
function UserProfile() {
const [user] = createResource(fetchCurrentUser);
return (
<Suspense fallback={<LoadingSpinner />}>
<div>
<h1>{user()?.name}</h1>
<p>{user()?.email}</p>
</div>
</Suspense>
);
}
Best practice: Use optional chaining (user()?.name) inside Suspense — the resource starts as undefined and the DOM is pre-created before the resource resolves.
Each resource triggers only its closest Suspense boundary:
<Suspense fallback={<PageLoader />}>
<h1>{pageTitle()}</h1>
<Suspense fallback={<SidebarLoader />}>
<Sidebar data={sidebarData()} />
</Suspense>
</Suspense>
Use <ErrorBoundary> to catch resource errors:
import { ErrorBoundary, Suspense } from "solid-js";
<ErrorBoundary
fallback={(err, reset) => (
<div>
<p>Failed to load: {err.message}</p>
<button onClick={reset}>Retry</button>
</div>
)}
>
<Suspense fallback={<Loading />}>
<DataComponent />
</Suspense>
</ErrorBoundary>
You can also check resource.error directly:
const [data] = createResource(fetcher);
return (
<Show when={!data.error} fallback={<div>Error: {data.error?.message}</div>}>
<div>{data()?.value}</div>
</Show>
);
const [data] = createResource(fetcher, {
// Initial value — resource starts in "ready" state, never undefined
initialValue: [],
// SSR: where to load data from during hydration
ssrLoadFrom: "server", // default — use server-fetched value
// ssrLoadFrom: "initial", // re-fetch on client after hydration
// Defer streaming until resource resolves
deferStream: false,
// Custom storage (e.g., for persistence)
storage: createSignal,
});
When provided, resource() is never undefined and the type reflects this:
const [todos] = createResource(fetchTodos, { initialValue: [] });
// todos() is Todo[], not Todo[] | undefined
return <For each={todos()}>{(todo) => <div>{todo.title}</div>}</For>;
// createResource — integrated with Suspense, loading/error states built in
const [data] = createResource(fetchData);
// Manual approach — no Suspense integration, manual loading/error tracking
const [data, setData] = createSignal<Data>();
const [loading, setLoading] = createSignal(false);
const [error, setError] = createSignal<Error>();
onMount(async () => {
setLoading(true);
try {
setData(await fetchData());
} catch (e) {
setError(e as Error);
} finally {
setLoading(false);
}
});
Use createResource when:
mutateUse manual fetch when:
Build frontend interfaces with externally randomized style direction. Use when the user asks to build web components, pages, or applications with high design diversity. Produces distinctive, production-grade UI that avoids repetitive AI aesthetics.
Analyzes CLAUDE.md, AGENTS.md, and similar repository context files for effectiveness based on peer-reviewed research. Identifies instructions that hurt agent performance, redundant content, and unnecessary requirements. Use when reviewing a CLAUDE.md, auditing an AGENTS.md, optimizing context files, or when the user says "lint my CLAUDE.md", "review my AGENTS.md", "is my context file good", "optimize my context file", or "check my CLAUDE.md".
Complete reference for Claude Code skill YAML frontmatter fields, their values, and best practices. Use when writing frontmatter for SKILL.md, configuring skill invocation, setting allowed-tools, or deciding on skill metadata fields.