22
33Davstack Action is a simple and flexible library for building Next.js Server actions.
44
5- It is designed to work seamlessly with React Query, react hook fo
6-
75###Why Use Davstack Action?
86
9- - ⚡️ Super Simple API with zero boiler plate
10- - 🔋 Batteries included - input/output parsing, auth middlewares, file uploads
11- - 🧩 Flexible - Works well with react query, react hook form, or form actions
12- - 🏠 Familiar syntax, inspired by tRPC
13- - ✅ TypeScript-first - inputs, outputs and middleware are inferred
7+ - ✅ Simple and familiar syntax
8+ - ✅ Input/output parsing
9+ - ✅ Auth in middleware
10+ - ✅ Easy file uploads
11+ - ✅ Works well with Zod, React Query and React-Hook-Form.
12+ - ✅ Strongly interred types
1413
1514###Installation
1615
@@ -22,6 +21,87 @@ Visit the [DavStack Action Docs](https://davstack.com/action/overview) for more
2221
2322##Demo Usage
2423
24+ ``` ts
25+ // api/actions/todo-actions.ts
26+ ' use server'
27+ import {authedAction }from ' @/lib/action'
28+ import {z }from ' zod'
29+
30+ export const = authedAction .query (async ({ctx })=> {
31+ return ctx .db .todo .findMany ({
32+ where: {
33+ createdBy: { id:ctx .user .id },
34+ },
35+ });
36+ });
37+
38+ export const = authedAction
39+ .input ({ name:z .string ().min (1 ) })
40+ .mutation (async ({ctx ,input })=> {
41+ return ctx .db .todo .create ({
42+ data: {
43+ name:input .name ,
44+ createdBy: { connect: { id:ctx .user .id } },
45+ },
46+ });
47+ });
48+ ```
49+
50+ ``` tsx
51+ ' use client'
52+ import {useState }from ' react'
53+ import {useQuery ,useMutation }from ' @tanstack/react-query'
54+ import {createTodo ,getTodos }from ' @/app/actions/todo'
55+
56+ export function TodosList() {
57+ const data : todos }= useQuery ({
58+ queryKey: [' todos'
59+ queryFn : ()=> getTodos (),
60+ });
61+ return (
62+ <div className = " flex flex-col gap-1 py-4"
63+ { todos .map ((todo )=> (
64+ <TodoItem key = { todo .id } todo = { todo } />
65+ ))}
66+ </div >
67+ );
68+ }
69+
70+ function CreateTodoForm() {
71+ const = useState (' '
72+
73+ const = useMutation ({
74+ mutationFn:createTodo ,
75+ onSuccess : ()=> {
76+ invalidateTodos ();
77+ setName (' '
78+ },
79+ });
80+
81+ return (
82+ <form
83+ onSubmit = { (e )=> {
84+ e .preventDefault ();
85+ createTodoMutation .mutate ({name });
86+ }}
87+ className = " flex"
88+ >
89+ <input
90+ type = " text"
91+ placeholder = " Enter todo name"
92+ value = { name }
93+ onChange = { (e )=> setName (e .target .value )}
94+ />
95+ <button type = " submit" disabled = { createTodoMutation .isPending } >
96+ { createTodoMutation .isPending ? ' loading' : ' add' }
97+ </button >
98+ </form >
99+ );
100+ }
101+ ```
102+
103+ ##Usage Guide
104+
25105###Defining Actions
26106
27107Import the public/authed action builders from the action file, and define your actions. You can use the` query ` or` mutation ` methods to define the action function.