Back to articles
Astro Actions Has a Free API — Heres How to Add Type-Safe Server Functions

Astro Actions Has a Free API — Heres How to Add Type-Safe Server Functions

via Dev.to WebdevAlex Spinov

Astro Actions let you define type-safe server functions that you call directly from your frontend components — no REST endpoints, no GraphQL, no boilerplate. Why Astro Actions? Type-safe : Full TypeScript inference from server to client Zero boilerplate : Define a function, call it from any component Built-in validation : Zod schemas for input validation Framework-agnostic : Works with React, Vue, Svelte, Solid inside Astro Progressive enhancement : Works with and without JavaScript Setup Actions are built into Astro 4.8+. No extra packages needed. npm create astro@latest my-app Define Actions Create src/actions/index.ts : import { defineAction } from ' astro:actions ' ; import { z } from ' astro:schema ' ; export const server = { createPost : defineAction ({ accept : ' json ' , input : z . object ({ title : z . string (). min ( 1 ). max ( 200 ), body : z . string (). min ( 10 ), tags : z . array ( z . string ()). optional (), }), handler : async ( input ) => { const post = await db .

Continue reading on Dev.to Webdev

Opens in a new tab

Read Full Article
7 views

Related Articles