From RTK Query

export const api = createApi({
	baseQuery: fetchBaseQuery({ baseUrl: '/' }),
	tagTypes: ['Member', 'Members'],
	endpoints: () => ({})
});
// store.ts: reducer: { [api.reducerPath]: api.reducer }, middleware: (gDM) => gDM().concat(api.middleware)

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

const membersApi = api.injectEndpoints({
	endpoints: (build) => ({
		listMembers: build.query<Page<Member>, MemberFilters>({
			query: (filters) => ({ url: 'api/members', params: filters }),
			providesTags: (page) => [
				'Members',
				...(page?.rows.map((m) => ({ type: 'Member' as const, id: m.id })) ?? [])
			],
			keepUnusedDataFor: 300
		})
	})
});
export const { useListMembersQuery } = membersApi;

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

getMember: build.query<Member, number>({
	query: (id) => `api/members/${id}`,
	providesTags: (_member, _error, id) => [{ type: 'Member', id }]
})

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

updateMember: build.mutation<Member, { id: number; name: string }>({
	query: ({ id, ...body }) => ({ url: `api/members/${id}`, method: 'PATCH', body }),
	invalidatesTags: (member) => (member ? [{ type: 'Member', id: member.id }, 'Members'] : [])
})

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

const { data, isLoading, isFetching, error } = useListMembersQuery(filters);

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

if (isLoading) return <p>Loading…</p>;
if (error) return <p role="alert">{String(error)}</p>;
// isFetching && !isLoading: a background refetch

{#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 = useGetMemberQuery(id ?? skipToken);

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

const details = useGetMemberQuery(1, { skip: !open });

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

// The hook keeps the last result of another arg in `data`;
// `currentData` holds only this arg's result.
const { data, currentData, isFetching } = useListMembersQuery(filters);

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

const polled = useListMembersQuery(filters, {
	pollingInterval: 30_000,
	skipPollingIfUnfocused: true
});

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

const [trigger, search] = useLazyListMembersQuery();
// on submit: trigger({ search: term });

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

dispatch(api.util.invalidateTags(['Members']));
dispatch(api.util.invalidateTags([{ type: 'Member', id }]));

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

const cached = membersApi.endpoints.getMember.select(id)(getState()).data;
dispatch(
	membersApi.util.updateQueryData('getMember', id, (draft) => {
		draft.name = 'Amara';
	})
);

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

// one dispatch per cached list arg that holds the row
for (const args of membersApi.util.selectCachedArgsForQuery(getState(), 'listMembers')) {
	dispatch(
		membersApi.util.updateQueryData('listMembers', args, (page) => {
			const row = page.rows.find((m) => m.id === id);
			if (row) row.pinned = true;
		})
	);
}

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

const prefetchMember = usePrefetch('getMember');
// onMouseEnter={() => prefetchMember(id)}

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

const member = await dispatch(membersApi.endpoints.getMember.initiate(id)).unwrap();

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

const [updateMember, { isLoading, error }] = useUpdateMemberMutation();
// await updateMember({ id: 1, name: 'Amara' }).unwrap();

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

const [updateMember] = useUpdateMemberMutation();
const member = await updateMember(input).unwrap();
toast(`Saved ${member.name}`);

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

pinMember: build.mutation<Member, { id: number; pinned: boolean }>({
	query: ({ id, pinned }) => ({ url: `api/members/${id}/pin`, method: 'PUT', body: { pinned } }),
	async onQueryStarted({ id, pinned }, { dispatch, queryFulfilled }) {
		const patch = dispatch(
			membersApi.util.updateQueryData('getMember', id, (draft) => {
				draft.pinned = pinned;
			})
		);
		try {
			await queryFulfilled;
		} catch {
			patch.undo();
		}
	}
})

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 }))
});

listFeed: build.infiniteQuery<Page<Member>, MemberFilters, number>({
	infiniteQueryOptions: {
		initialPageParam: 1,
		getNextPageParam: (last) => (last.page < last.lastPage ? last.page + 1 : undefined)
	},
	query: ({ queryArg, pageParam }) => ({ url: 'api/members', params: { ...queryArg, page: pageParam } })
})
// const { data, hasNextPage, fetchNextPage } = useListFeedInfiniteQuery(filters);

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

// The store is rehydrated from the server's state:
export const api = createApi({
	// …
	extractRehydrationInfo(action, { reducerPath }) {
		if (action.type === HYDRATE) return action.payload[reducerPath];
	}
});

// 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
};

// Redux DevTools: the api slice and every query/mutation action
configureStore({ reducer, middleware, devTools: true });

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

const store = setupStore();
server.use(http.get('*/api/members', () => HttpResponse.json(emptyPage)));
render(<Provider store={store}><MemberList /></Provider>);
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)