Learn / Zidom JS

Data fetching

Query caching, retries and cancellation.

Fetch data with a query client#

@zidomjs/query manages server data: deduplicated requests, fresh-cache reads, reactive status, retries and cancellation. Keep it separate from local UI signals.

tsx
●  Zidom
import { signal } from '@zidomjs/core';import { createQueryClient } from '@zidomjs/query';const client = createQueryClient();const userId = signal('42');const user = client.query({  key: () => ['users', userId.value],  staleTime: 60_000,  retry: 2,  fetcher: async ({ key, signal }) => {    const [, id] = key as readonly [string, string];    const response = await fetch(`/api/users/${id}`, { signal });    if (!response.ok) throw new Error(`HTTP ${response.status}`);    return response.json() as Promise<{ name: string }>;  }});// In JSX:// <p>{() => user.data.value?.name ?? 'Loading…'}</p>

Cache semantics#

  • Keys are a string or an array of serializable primitive values; object keys are not supported.
  • Simultaneous requests with the same key share in-flight work.
  • staleTime controls how long cached data remains fresh; its default is zero.
  • Switching query keys drops obsolete results rather than overwriting the new view.
  • retry defaults to zero; configure retries intentionally for idempotent operations.

Invalidate and refetch#

ts
●  Zidom
client.invalidate(['users', '42']); // marks stale; does NOT automatically fetchawait user.refetch();               // force an explicit request

Unlike some mature data libraries, Zidom's invalidation does not automatically trigger refetching in this beta. A query exposes readonly data, status, error, isFetching and key signals.

Disposal and limitations#

ts
●  Zidom
user.dispose();client.dispose();

Queries owned by a mounted scope clean up with that scope; long-lived queries require manual disposal. Mutations, optimistic updates, infinite queries, persistent cache, focus-refetch and SSR cache transfer are not provided yet. See source guide.

Run the example#

See the Zidom query example and inspect the exact source next to the result.