Skip to main content

Documentation Index

Fetch the complete documentation index at: https://kubo-47e69177.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Project Setup

​
Prerequisites

  • Next.js App Router project.
  • Node.js 20+.
  • A package manager (pnpm, npm, or yarn).

​
Install packages

terminal
pnpm add @zapaction/core @zapaction/react @zapaction/query @tanstack/react-query zod
terminal
npm install @zapaction/core @zapaction/react @zapaction/query @tanstack/react-query zod

​
Configure server context

app/bootstrap.server.ts
import { setActionContext } from "@zapaction/core";

setActionContext(async () => {
  const userId = "demo-user";
  return { userId, roles: ["user"] };
});

​
Define one server action

app/actions.ts
"use server";

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

export const createTodo = defineAction({
  name: "createTodo",
  input: z.object({ title: z.string().min(1) }),
  output: z.object({
    id: z.string(),
    title: z.string(),
    done: z.boolean()
  }),
  tags: ["todos"],
  handler: async ({ input, ctx }) => ({
    id: crypto.randomUUID(),
    title: `[${ctx.userId}] ${input.title}`,
    done: false
  })
});

​
Configure Query client and tag registry

app/providers.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { setTagRegistry } from "@zapaction/query";
import { useState } from "react";

setTagRegistry({
  todos: [["todos"]]
});

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

​
Wire providers in layout

app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

​
Verify setup

terminal
pnpm test
pnpm --filter @zapaction/example-next-app dev