Mutations y Server Actions en Next.js

Mutations y Server Actions en Next.js | Nicolás Garzón

Texto

UI intent
   ↓
Server Action reference
   ↓
parse and validate input
   ↓
authenticate actor
   ↓
authorize resource/action
   ↓
transaction / external side effect
   ↓
invalidate or update cache
   ↓
return result, refresh or redirect

TypeScript

export default async function OrderPage({ params }: PageProps<"/orders/[orderId]">) {
  const { orderId } = await params;

  async function cancelOrder() {
    "use server";
    // orderId is captured as part of the encrypted closure contract.
  }

  return <form action={cancelOrder}>{/* ... */}</form>;
}

TypeScript

const raw = Object.fromEntries(formData);
const parsed = cancelOrderSchema.safeParse(raw);

if (!parsed.success) {
  return {
    status: "invalid" as const,
    errors: parsed.error.flatten().fieldErrors,
  };
}

TypeScript

const order = await orderRepository.findAccessibleForUpdate({
  orderId: input.orderId,
  organizationId: session.organizationId,
  userId: session.user.id,
});

if (!order) {
  return { status: "notAllowed" as const };
}

TypeScript

const cancelled = await db.$transaction(async (transaction) => {
  const current = await transaction.order.findUnique({ where: { id: order.id } });

  if (!current || current.version !== input.version) {
    throw new ConcurrentUpdateError();
  }

  return transaction.order.update({
    where: { id: current.id },
    data: {
      status: "cancelled",
      version: { increment: 1 },
    },
  });
});

TypeScript

type CancelOrderState =
  | { status: "idle" }
  | { status: "invalid"; errors: Record<string, string[]> }
  | { status: "notAllowed" }
  | { status: "conflict"; message: string }
  | { status: "success"; orderId: string };

TypeScript

"use client";

export function ArchiveButton({ action }: { action: () => Promise<void> }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      onClick={() => {
        startTransition(async () => {
          await action();
        });
      }}
      disabled={isPending}
    >
      {isPending ? "Archivando…" : "Archivar"}
    </button>
  );
}

TypeScript

"use server";

export async function createOrderAction(
  _previous: CreateOrderState,
  formData: FormData,
): Promise<CreateOrderState> {
  const parsed = createOrderSchema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) {
    return { status: "invalid", errors: parsed.error.flatten().fieldErrors };
  }

  const session = await requireSession();

  const result = await orderService.create({
    organizationId: session.organizationId,
    actorId: session.user.id,
    input: parsed.data,
  });

  updateTag(`organization:${session.organizationId}:orders`);

  return {
    status: "success",
    orderId: result.id,
  };
}