solidjs-data-fetching

SolidJS Route Data Fetching

Thesis: Route data loads via onMount + signals + alive + batch; never createResource.

Reference files: dashboard/index.tsx and settings/index.tsx (settings tabs are extracted to settings/_components/).

Before modifying a module's routes, read docs/modules/{module}/spec.md for frontend components, data fetching patterns, and modal state management.

Data Fetching

Always use onMount + createSignal + alive guard + batch. This is the established pattern across all pages. Do not use createResource — it causes orphaned computation warnings on route transitions and triggers route-level Suspense when inside conditional components.

createAsync + query from @solidjs/router is the official SolidJS recommendation going forward (Solid 2.0). Not yet adopted in this project — use the signals pattern for consistency.

// STANDARD — used on all pages
const [data, setData] = createSignal<MyType[]>([]);
const [loading, setLoading] = createSignal(true);
const [error, setError] = createSignal("");

let alive = true;
onCleanup(() => {
  alive = false;
});

const fetchData = async () => {
  setLoading(true);
  setError("");
  try {
    const result = await myApi.list();
    if (!alive) return;
    batch(() => {
      setData(result);
      setLoading(false);
    });
  } catch (err) {
    if (!alive) return;
    batch(() => {
      setError(getErrorMessage(err, "Failed to load"));
      setLoading(false);
    });
  }
};

onMount(() => {
  fetchData();
});

Async Data Pattern

Three rules that MUST be used together for any page that fetches data:

1. batch() signal updates — wrap setData + setLoading(false) in batch() so they update atomically. Without this, nested reactive scopes resolve in intermediate states during route transitions, creating computations outside the reactive root.

2. onMount for initial fetch — never rely on createEffect for the first fetch.

3. defer: true on createEffect(on(...)) for reactive refetches — prevents the effect from firing synchronously during mount (which overlaps with route transitions).