Reading

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { listMembers } from '$api/members';

	let search = $state('');
	// The rows of the previous search stay on screen while the next ones load.
	const members = createQuery(listMembers, () => ({ search }), { keepPrevious: true });
</script>

<input type="search" aria-label="Search members" bind:value={search} />
<!-- `info.placeholder` is true while the rows belong to the previous search. -->
<ul class:dimmed={members.info.placeholder}>
	{#each members.data?.rows ?? [] as member (member.id)}
		<li>{member.name}</li>
	{/each}
</ul>

<style>
	.dimmed {
		opacity: 0.6;
	}
</style>

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { getMember } from '$api/members';
	import type { Member } from '$api/types';

	// The row the user clicked in the list: shown at once while the full record loads.
	let { id, row }: { id: number; row: Member | undefined } = $props();

	const member = createQuery(getMember, () => ({ id }), { placeholder: () => row });
</script>

<!-- `info.placeholder` is true while `data` is the row, not the server's answer. -->
<article class:dimmed={member.info.placeholder} aria-busy={member.loading}>
	<h2>{member.data?.name ?? 'Member'}</h2>
	<p>{member.data?.email}</p>
</article>

<style>
	.dimmed {
		opacity: 0.6;
	}
</style>

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { listTeams } from '$api/members';

	let open = $state(false);
	// Mounted with the page, fetched only while the panel is open; closing it keeps the data.
	const teams = createQuery(listTeams, { when: () => open });
</script>

<details bind:open>
	<summary>Teams</summary>
	{#if teams.loading}<p>Loading…</p>{/if}
	<ul>
		{#each teams.data ?? [] as team (team.id)}
			<li>{team.name} ({team.members})</li>
		{/each}
	</ul>
</details>

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { getMember } from '$api/members';

	let { selected }: { selected: number | null } = $props();
	// No id, no request (`blocked` reads 'when') until one is selected.
	const member = createQuery(getMember, () => (selected === null ? undefined : { id: selected }));
</script>

{#if selected === null}
	<p>Select a member.</p>
{:else if member.data}
	<h2>{member.data.name}</h2>
	<p>{member.data.email}</p>
{/if}

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { listMembers } from '$api/members';

	// Nothing runs until load(params); then the binding shows those params (cached, refetch).
	const results = createQuery(listMembers, { when: false, keepPrevious: true });
</script>

<form
	onsubmit={(event) => {
		event.preventDefault();
		const search = String(new FormData(event.currentTarget).get('search') ?? '');
		void results.load({ search });
	}}
>
	<input type="search" name="search" aria-label="Search members" />
	<button disabled={results.loading}>Search</button>
</form>

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { listMembers } from '$api/members';

	let every = $state<'10s' | '30s' | 'off'>('30s');
	// The fastest active use wins; polls pause while the tab is hidden and show `refreshing`.
	const members = createQuery(listMembers, () => ({}), {
		poll: () => (every === 'off' ? false : every)
	});
</script>

<label>
	Refresh
	<select bind:value={every}>
		<option value="10s">every 10 seconds</option>
		<option value="30s">every 30 seconds</option>
		<option value="off">off</option>
	</select>
</label>
{#if members.refreshing}<progress aria-label="Refreshing"></progress>{/if}

<script lang="ts">
	import { createQuery } from '@svelte-lean/query';
	import { listMembers, listTeams } from '$api/members';

	const members = createQuery(listMembers, () => ({}));
	const teams = createQuery(listTeams, { poll: () => '30s' });
	// One state for the page is a $derived over its bindings; the polled teams only refresh.
	const loading = $derived(members.loading || teams.loading);
	const refreshing = $derived(members.refreshing || teams.refreshing);
	const error = $derived(members.error ?? teams.error);
	const refetch = () => Promise.all([members.refetch(), teams.refetch()]);
</script>

{#if loading}<p>Loading…</p>{:else if refreshing}<progress aria-label="Refreshing"></progress>{/if}
{#if error}<p role="alert">Part of the page could not be loaded.</p>{/if}
<button onclick={refetch}>Refresh</button>

const table = createQuery(listMembers, () => ({}), { poll: () => '10s' }); // a poll: refreshing

table.refetch({ loading: false }); // a user refresh shown as a thin bar, rows stay
invalidate('Members', { reason: 'bulk-import', loading: true }); // dim every list it touches
// A badge that should never flash reads data only; "show each poll" reads busy.