Actions — form dan mutasi yang tervalidasi

Di CI3, validasi adalah sesuatu yang kamu ingat untuk menulis. Di Actions, ia bagian dari definisi fungsinya — dan kode yang melewatkannya tidak akan dikompilasi.

Mendefinisikan action

// src/actions/index.ts
import { defineAction, ActionError } from "astro:actions";
import { z } from "astro:schema";
import { daftarkanNewsletter } from "@/lib/newsletter";

export const server = {
  langganNewsletter: defineAction({
    accept: "form",
    input: z.object({
      email: z.string().email("Format email tidak valid"),
      kategori: z.enum(["ekonomi", "pasar", "teknologi"]).default("ekonomi"),
      setuju: z.literal("on", { message: "Kamu harus menyetujui ketentuan" }),
    }),
    handler: async ({ email, kategori }, context) => {
      const ip = context.locals.ipPembaca;

      if (await terlaluSering(ip)) {
        throw new ActionError({
          code: "TOO_MANY_REQUESTS",
          message: "Terlalu banyak percobaan. Coba lagi beberapa menit lagi.",
        });
      }

      await daftarkanNewsletter(email, kategori);
      return { pesan: "Cek emailmu untuk konfirmasi." };
    },
  }),
};

Saat handler berjalan, email sudah dipastikan string berformat email dan kategori sudah dipastikan salah satu dari tiga nilai itu. Tidak ada cabang eksekusi yang melewati validasi — bukan karena kamu disiplin, tapi karena tidak ada jalan lain masuk ke sana.

Bandingkan dengan CI3

public function langganan()
{
    $email = $this->input->post('email');
    $kategori = $this->input->post('kategori');

    // Semuanya opsional. Semuanya bisa lupa.
    // $email bisa null, array, atau string 10 MB.
    // $kategori bisa string apa pun yang langsung masuk ke query.

    $this->newsletter_model->daftar($email, $kategori);
    redirect('/terima-kasih');
}

Di CI3, $this->input->post('kategori') bisa berisi apa saja — termasuk array, yang akan membuat perbandingan string berperilaku aneh, atau nilai yang tidak ada di daftar yang kamu harapkan. z.enum([...]) menutup seluruh kelas masalah itu dalam satu baris.

Memakainya dari form biasa

---
import { actions } from "astro:actions";

const hasil = Astro.getActionResult(actions.langganNewsletter);
---
{hasil?.error && (
  <div class="galat" role="alert">{hasil.error.message}</div>
)}

{hasil?.data && (
  <div class="sukses" role="status">{hasil.data.pesan}</div>
)}

<form method="POST" action={actions.langganNewsletter}>
  <label>Email <input type="email" name="email" required /></label>

  <label>Kategori
    <select name="kategori">
      <option value="ekonomi">Ekonomi</option>
      <option value="pasar">Pasar</option>
      <option value="teknologi">Teknologi</option>
    </select>
  </label>

  <label><input type="checkbox" name="setuju" /> Saya setuju</label>

  <button type="submit">Berlangganan</button>
</form>

Memakainya dari island Vue

import { actions, isInputError } from "astro:actions";

async function kirim() {
  const { data, error } = await actions.langganNewsletter({
    email: email.value,
    kategori: "ekonomi",
    setuju: "on",
  });

  if (isInputError(error)) {
    // Error validasi per field
    galat.value = error.fields.email?.[0] ?? "Periksa lagi isianmu";
    return;
  }
  if (error) {
    galat.value = error.message;
    return;
  }

  pesan.value = data.pesan;
}

data di sini bertipe — TypeScript tahu ia punya field pesan, karena tipenya disimpulkan dari nilai kembalian handler. Tidak ada as, tidak ada tebakan. Ini keuntungan yang tidak bisa diberikan endpoint REST buatan sendiri tanpa alat pembangkit tipe terpisah.

Error sebagai nilai, bukan lemparan

const { data, error } = await actions.langganNewsletter(input);

Kamu tidak bisa mengakses data tanpa melihat bahwa error ada — TypeScript menandainya sebagai mungkin undefined. Ini kebalikan dari try/catch yang mudah dilupakan. Kode yang mengabaikan error tidak lolos astro check.

Kapan Actions, kapan endpoint .ts

CSRF: yang kamu dapat dan yang tidak

Astro memeriksa header Origin untuk action berbasis form. Itu menutup kasus umum CSRF tanpa kamu menulis satu baris pun. Tapi perlindungan itu tidak berlaku untuk endpoint .ts buatanmu — di sana kamu bertanggung jawab sendiri. Kalau kamu menulis src/pages/api/hapus-akun.ts yang menerima POST dan bertindak berdasarkan cookie sesi, kamu baru saja membuat lubang CSRF. Fase 7 membahas cara menutupnya.