Pagination

Pagination curseur avec useInfiniteQuery et actions de lecture.

​

Pagination

​

Contrat serveur

app/actions.ts

import { defineAction } from "@zapaction/core";
import { z } from "zod";

export const listTodosPage = defineAction({
  input: z.object({ cursor: z.string().nullable(), limit: z.number().min(1).max(100) }),
  output: z.object({
    items: z.array(z.object({ id: z.string(), title: z.string(), done: z.boolean() })),
    nextCursor: z.string().nullable()
  }),
  handler: async ({ input }) => ({
    items: [],
    nextCursor: input.cursor ? null : "cursor_2"
  })
});

​

Client

components/todo-feed.tsx

"use client";

import { useInfiniteQuery } from "@tanstack/react-query";

import { listTodosPage } from "../app/actions";

const query = useInfiniteQuery({
  queryKey: ["todos", "infinite"],
  initialPageParam: null as string | null,
  queryFn: async ({ pageParam }) =>
    listTodosPage({ cursor: pageParam, limit: 20 }),
  getNextPageParam: (lastPage) => lastPage.nextCursor
});