SolidJS — examples

Beyond the minimal binding snippet — the patterns examples/solid is built on: composing a data layer, slicing shared fields, and driving the UI off task state.

A reactive data layer

createEffect tracks both the query accessor and the seed task's settled flag — the page query re-runs latest-wins on any change after seeding.

incidents.tsfrontend

export function createIncidents(query: Accessor<QueryArgs>) {
  const seed = createTask(initIncidents);
  const page = createTask(incidents.queryIncidents);
  const seedProgress = createSharedValue(incidentsMemory, 'signals.seedProgress');
  const metrics = createSharedValue(incidentsMemory, 'state.metrics');

  seed.runOnce();
  createEffect(() => {
    const q = query();
    if (seed.state().settled) page.run(q);
  });

  return {
    ready: () => seed.state().settled,
    seedProgress: () => seedProgress() ?? 0,
    metrics: () => metrics() ?? null,
    page: () => page.state().data,
    isFetching: () => page.state().pending,
  };
}

Gate the UI on task state

state() is an Accessor<TaskSnapshot> — Show/Switch track pending natively, no isPending flag to manage.

frontend

const page = createTask(incidents.queryIncidents);

return (
  <Show when={!page.state().pending} fallback={<p>scanning 1M records…</p>}>
    <table>{/* page.state().data?.rows */}</table>
  </Show>
);

Slice a field into an Accessor

select + equals — the Accessor only emits when the slice changes.

frontend

import { shallowEqual } from '@atolljs/core';

const pressure = createSharedValue(
  incidentsMemory,
  'state.metrics',
  (m) => ({ open: m.open, critical: m.critical }),
  { equals: shallowEqual },
);