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.
staleTimecontrols how long cached data remains fresh; its default is zero.- Switching query keys drops obsolete results rather than overwriting the new view.
retrydefaults 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 requestUnlike 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.