From TanStack Query

const queryClient = new QueryClient();
// +layout.svelte
<QueryClientProvider client={queryClient}>
	{@render children()}
</QueryClientProvider>

createClient({ transport: http({ base: '/' }) });

export const memberKeys = {
	all: ['members'] as const,
	list: (filters: MemberFilters) => [...memberKeys.all, 'list', filters] as const
};
export const listMembers = (filters: MemberFilters) =>
	queryOptions({
		queryKey: memberKeys.list(filters),
		queryFn: () => api.get<Page<Member>>('api/members', filters),
		staleTime: 15_000,
		gcTime: 300_000
	});

const listMembers = defineQuery({
	get: 'api/members',
	params: type<MemberFilters>(),
	result: page<Member>(),
	tags: ['Members'],
	fresh: '15s', // staleTime
	keep: '5m' // gcTime
});

export const getMember = (id: number) =>
	queryOptions({
		queryKey: ['members', 'detail', id],
		queryFn: () => api.get<Member>(`api/members/${id}`)
	});

const getMember = defineQuery({
	get: 'api/members/{id}',
	result: type<Member>(),
	entity: 'Member' // provides tag('Member', id)
});

const queryClient = useQueryClient();
const updateMember = createMutation(() => ({
	mutationFn: (input: { id: number; name: string }) =>
		api.patch<Member>(`api/members/${input.id}`, input),
	onSuccess: (member) => {
		queryClient.invalidateQueries({ queryKey: ['members', 'detail', member.id] });
		queryClient.invalidateQueries({ queryKey: ['members', 'list'] });
	}
}));

const updateMember = defineMutation({
	patch: 'api/members/{id}',
	body: type<{ name: string }>(),
	result: type<Member>(),
	invalidates: (member) => [tag('Member', member.id), 'Members']
});

const members = createQuery(() => listMembers(filters));

const members = createQuery(listMembers, () => filters);

{#if members.isPending}<p>Loading…</p>{/if}
{#if members.isFetching && !members.isPending}<progress></progress>{/if}
{#if members.isError}<p role="alert">{members.error.message}</p>{/if}

{#if members.loading}<p>Loading…</p>{/if}
{#if members.refreshing}<progress aria-label="Refreshing"></progress>{/if}
{#if members.error}<p role="alert">{members.error.message}</p>{/if}

const member = createQuery(() => ({
	...getMember(id!),
	enabled: id !== undefined
}));

const member = createQuery(getMember, () => (id ? { id } : undefined));

const details = createQuery(() => ({ ...getMember(1), enabled: open }));

const details = createQuery(getMember, () => ({ id: 1 }), { when: () => open });

const list = createQuery(() => ({
	...listMembers(filters),
	placeholderData: keepPreviousData
}));

const list = createQuery(listMembers, () => filters, { keepPrevious: true });

const polled = createQuery(() => ({
	...listMembers(filters),
	refetchInterval: 30_000
}));

const polled = createQuery(listMembers, () => filters, { poll: () => '30s' });

let term = $state<string | null>(null);
const search = createQuery(() => ({
	...listMembers({ search: term ?? '' }),
	enabled: term !== null
}));
// on submit: term = input.value

const search = createQuery(listMembers, { when: false });
// later: await search.load({ search: term });

queryClient.invalidateQueries({ queryKey: ['members'] });
queryClient.invalidateQueries({ queryKey: ['members', 'detail', id] });

invalidate('Members'); // every entry tagged Members
invalidate(tag('Member', id)); // one member, everywhere it is cached

const cached = queryClient.getQueryData<Member>(['members', 'detail', id]);
queryClient.setQueryData<Member>(['members', 'detail', id], (old) =>
	old ? { ...old, name: 'Amara' } : old
);

const cached = getMember.get({ id });
getMember.set({ id }, (previous) => ({ ...previous!, name: 'Amara' }));

// every cached list page that holds the row
queryClient.setQueriesData<Page<Member>>({ queryKey: ['members', 'list'] }, (page) =>
	page && {
		...page,
		rows: page.rows.map((m) => (m.id === id ? { ...m, pinned: true } : m))
	}
);

// Every page and detail that holds the row, at once (undefined: no change, null: removed).
patch(tag('Member', id), (m: Member) => ({ ...m, pinned: true }));

queryClient.prefetchQuery(getMember(id));

getMember.prefetch({ id }); // low priority; errors stay on the entry

const member = await queryClient.fetchQuery(getMember(id));

const member = await getMember.fetch({ id }); // fresh cache, else one request

const save = createMutation(() => ({ mutationFn: patchMember }));
// save.mutate({ id: 1, name: 'Amara' }); save.isPending; save.error

const save = createMutation(updateMember);
// save.run({ id: 1, name: 'Amara' }); save.busy; save.error

const save = createMutation(() => ({
	mutationFn: patchMember,
	onSuccess: (member) => toast(`Saved ${member.name}`)
}));

const save = createMutation(updateMember, {
	onSuccess: (member) => console.info('saved', member.name) // a toast, close a dialog
});

const pin = createMutation(() => ({
	mutationFn: pinMember,
	onMutate: async ({ id, pinned }) => {
		await queryClient.cancelQueries({ queryKey: ['members', 'list'] });
		const previous = queryClient.getQueriesData<Page<Member>>({ queryKey: ['members', 'list'] });
		queryClient.setQueriesData<Page<Member>>({ queryKey: ['members', 'list'] }, (page) =>
			page && { ...page, rows: page.rows.map((m) => (m.id === id ? { ...m, pinned } : m)) }
		);
		return { previous };
	},
	onError: (_error, _input, context) => {
		for (const [key, data] of context?.previous ?? []) queryClient.setQueryData(key, data);
	},
	onSettled: () => queryClient.invalidateQueries({ queryKey: ['members', 'list'] })
}));

const pin = createMutation(pinMember, {
	// A patch made here is undone if the write fails.
	optimistic: ({ id, pinned }) => patch(tag('Member', id), (m: Member) => ({ ...m, pinned }))
});

const feed = createInfiniteQuery(() => ({
	queryKey: ['members', 'feed', filters],
	queryFn: ({ pageParam }) => api.get<Page<Member>>('api/members', { ...filters, page: pageParam }),
	initialPageParam: 1,
	getNextPageParam: (last) => (last.page < last.lastPage ? last.page + 1 : undefined)
}));
// feed.data?.pages.flatMap((p) => p.rows), feed.hasNextPage, feed.fetchNextPage()

const feed = createInfinite(listMembers, () => filters, { perPage: 50 });
// feed.rows, feed.hasMore, feed.loadMore(), feed.loadingMore

// src/routes/members/+page.ts (queryClient from the layout load, enabled: browser)
export const load: PageLoad = async ({ parent }) => {
	const { queryClient } = await parent();
	await queryClient.prefetchQuery(listMembers({}));
};

// src/routes/members/+page.ts — the layout load created one client per request (see Server rendering)
export const load: Load = async ({ parent }) => {
	const { client } = await parent();
	await listMembers.fetch({}, { client }); // rendered on the server, replayed in the browser
};

<script lang="ts">
	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
</script>

<SvelteQueryDevtools />

createClient({
	transport: http({ base: '/' }),
	modules: [devtools({ panel: true })] // a stub in production builds
});

const queryClient = new QueryClient({
	defaultOptions: { queries: { retry: false } }
});
server.use(http.get('*/api/members', () => HttpResponse.json(emptyPage)));
render(WithQueryClient, { props: { client: queryClient } }); // <QueryClientProvider> + <MemberList />
await screen.findByText('No members');

using t = createTestClient(); // virtual clock, devtools findings on
t.mock(listMembers, { rows: [], total: 0, page: 1, perPage: 20, lastPage: 1 }, { latency: 50 });
t.mock(updateMember, () => reply.validation({ email: 'taken' }));
const list = createQuery(listMembers, () => ({}));
t.observe(() => list.data);
await t.advance(50);
// expect(t.calls(listMembers)).toHaveLength(1)