Code all day for $5 a month.

−export async function listOrders(filters: OrderFilters) {

− const res = await api.get(`/orders?${new URLSearchParams(filters)}`);

+export async function listOrders(

+ filters: OrderFilters,

+ cursor?: string,

+): Promise<Page<Order>> {

+ const q = new URLSearchParams({ ...filters, limit: '50' });

+ if (cursor) q.set('cursor', cursor);

+ const res = await api.get(`/orders?${q}`);

return res.json();

}

export function Orders() {

const filters = useFilters();

− const { data } = useQuery({

− queryKey: ['orders', filters],

− queryFn: () => listOrders(filters),

− });

− return <OrderTable rows={data ?? []} />;

+ const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({

+ queryKey: ['orders', filters],

+ queryFn: ({ pageParam }) => listOrders(filters, pageParam),

+ getNextPageParam: (last) => last.next,

+ });

+ const rows = data?.pages.flatMap((p) => p.items) ?? [];

+ return (

+ <OrderTable rows={rows}>

+ {hasNextPage && <LoadMore onClick={() => fetchNextPage()} />}

+ </OrderTable>

+ );

}

});

+

+it('keeps the filters on page 2', async () => {

+ setFilters({ status: 'paid' });

+ render(<Orders />);

+ await click('Load more');

+ expect(lastQuery()).toContain('status=paid');

+});