Custom API endpoints, end to end

$grit new shop --triple --next
$cd shop

DATABASE_URL=sqlite:./app.db

$grit generate resource Category \
$  --fields "name:string,slug:slug:name,image:file:image" \
$  --tree --public

apps/api/internal/models/category.go        the struct, and the database table
apps/api/internal/services/category.go      business logic (yours to grow)
apps/api/internal/handlers/category.go      HTTP in, JSON out
apps/api/internal/routes/category_routes.go every URL this resource answers
packages/shared/types/category.ts           the TypeScript type
apps/web/hooks/use-categories.ts            React Query hooks
apps/admin/resources/categories/            the admin screen

$grit generate seeder Category

func SeedCategories(db *gorm.DB) error {
    // Idempotent: running it twice does not double the rows. Every generated
    // seeder starts with this, and yours should keep it.
    var count int64
    db.Model(&models.Category{}).Count(&count)
    if count > 0 {
        log.Println("Categories already seeded, skipping...")
        return nil
    }

    records := []models.Category{
        {Name: "Laptops", IsFeatured: true,
            Image: &files.FileRef{URL: "https://picsum.photos/seed/laptops/600/400", Name: "laptops.jpg", MIME: "image/jpeg"}},
        {Name: "Phones", IsFeatured: true,
            Image: &files.FileRef{URL: "https://picsum.photos/seed/phones/600/400", Name: "phones.jpg", MIME: "image/jpeg"}},
        {Name: "Audio", IsFeatured: false,
            Image: &files.FileRef{URL: "https://picsum.photos/seed/audio/600/400", Name: "audio.jpg", MIME: "image/jpeg"}},
        {Name: "Accessories", IsFeatured: false,
            Image: &files.FileRef{URL: "https://picsum.photos/seed/accessories/600/400", Name: "accessories.jpg", MIME: "image/jpeg"}},
    }

    for _, r := range records {
        if err := db.Create(&r).Error; err != nil {
            log.Printf("Warning: failed to seed category: %v", err)
        }
    }
    log.Printf("Seeded %d category(s)", len(records))
    return nil
}

$grit migrate   # create the tables
$grit seed      # run every seeder
# Seeded 4 category(s)

$grit generate field Category is_featured:toggle

$grit migrate
$grit seed

$grit generate resource Product \
$  --fields "name:string,slug:slug:name,description:text,price:money,stock:int,image:file:image,category:belongs_to:Category" \
$  --public

// The column. A UUID string, indexed, and this is what the database stores.
CategoryID string `gorm:"size:36;index" json:"category_id"`

// The relation. NOT a column. GORM fills this when you ask it to, and
// leaves it nil when you do not.
Category *Category `gorm:"foreignKey:CategoryID" json:"category,omitempty"`

// No preload: category is null in the JSON.
db.Find(&products)

// One extra query for the whole page, not one per row.
db.Preload("Category").Find(&products)

$grit generate resource Campaign \
$  --fields "title:string,subtitle:string,slug:slug:title,description:text,image:file:image,products:many_to_many:Product" \
$  --public

campaign_products
  campaign_id  varchar(36)
  product_id   varchar(36)

// No CampaignID on Product, and no ProductID on Campaign. The join table
// is the relationship, and many2many names it.
Products []Product `gorm:"many2many:campaign_products;" json:"products,omitempty"`

Browser
   │  GET /api/v1/public/categories/featured?limit=8
   ▼
Router          routes/catalog_routes.go
   │            matches the URL, picks the handler
   ▼
Middleware      checks the API key, the rate limit, CORS
   │            rejects here, before your code runs
   ▼
Handler         handlers/catalog.go
   │            reads ?limit, calls one service method,
   │            turns the answer into a status code
   ▼
Service         services/catalog.go
   │            the actual question: which categories are featured
   ▼
GORM            builds SQL, binds parameters, scans rows into structs
   ▼
Database

// The service says what happened.
func (s *CatalogService) CampaignBySlug(slug string) (*CampaignDetail, error) {
    ...
    if errors.Is(err, gorm.ErrRecordNotFound) {
        return nil, ErrNotFound
    }
}

// The handler decides what that means over HTTP.
if errors.Is(err, services.ErrNotFound) {
    fail(c, http.StatusNotFound, "NOT_FOUND", "Campaign not found")
    return
}

// cmd/server/main.go, at boot, once.
db, err := database.Connect(cfg)

// routes/routes.go hands it to every resource's routes file.
mountResources(&Mount{ DB: db, ... })

// your routes file puts it in the handler.
h := handlers.NewCatalogHandler(m.DB)

// the handler passes it to the service.
&services.CatalogService{DB: db}

// 1 query, then 1 more per product. 200 products is 201 queries.
db.Find(&products)
for i := range products {
    db.First(&products[i].Category, "id = ?", products[i].CategoryID)
}

// 2 queries, whatever the number of products.
db.Preload("Category").Find(&products)

package services

import (
    "errors"
    "fmt"

    "gorm.io/gorm"

    "shop/apps/api/internal/models"
)

// CatalogService is the business logic behind the storefront's own endpoints.
type CatalogService struct {
    DB *gorm.DB
}

// FeaturedCategories returns the categories marked featured, newest first.
//
// limit is capped rather than trusted. It arrives from a query string, and
// ?limit=100000 on a public endpoint is a cheap way to make the database do
// expensive work.
func (s *CatalogService) FeaturedCategories(limit int) ([]models.Category, error) {
    if limit < 1 || limit > 50 {
        limit = 12
    }

    var items []models.Category
    err := s.DB.
        Where("is_featured = ?", true).
        Where("archived_at IS NULL").
        Order("created_at DESC").
        Limit(limit).
        Find(&items).Error
    if err != nil {
        return nil, fmt.Errorf("fetching featured categories: %w", err)
    }
    return items, nil
}

// CategoryWithCount is a category plus how many products point at it.
//
// Its own type rather than models.Category, because product_count is not a
// column. Adding a non-column field to the model would make it appear in the
// admin table, the generated TypeScript type and the API reference as though
// it were stored.
type CategoryWithCount struct {
    models.Category
    ProductCount int64 `json:"product_count"`
}

// CategoriesWithProductCounts returns every live category and its product
// count, in one query.
//
// The obvious version loads the categories and then counts products for each
// one: one query plus one per row, the N+1 above. A LEFT JOIN with GROUP BY
// asks the database the whole question once.
//
// LEFT, not INNER: an inner join drops categories with no products, and a
// category with nothing in it is exactly the one an admin is looking for.
func (s *CatalogService) CategoriesWithProductCounts() ([]CategoryWithCount, error) {
    var rows []CategoryWithCount
    err := s.DB.
        Model(&models.Category{}).
        Select("categories.*, COUNT(products.id) AS product_count").
        Joins("LEFT JOIN products ON products.category_id = categories.id AND products.deleted_at IS NULL").
        Where("categories.archived_at IS NULL").
        Group("categories.id").
        Order("product_count DESC").
        Find(&rows).Error
    if err != nil {
        return nil, fmt.Errorf("counting products per category: %w", err)
    }
    return rows, nil
}

// ErrNotFound is what a handler turns into a 404.
//
// The service says "not found"; the handler decides that means 404. Returning
// a gin status from here would tie the business logic to HTTP, and the same
// method is then unusable from a background job or a CLI command.
var ErrNotFound = errors.New("not found")

type CampaignDetail struct {
    Campaign models.Campaign  `json:"campaign"`
    Products []models.Product `json:"products"`
    Likes    int64            `json:"likes"`
    Liked    bool             `json:"liked"`
}

// CampaignBySlug loads a campaign's detail page.
//
// By slug, not id: /campaigns/summer-sale is the URL a person can read and a
// search engine can index.
//
// viewerID is empty for a signed-out visitor, and Liked is then false without
// a query. Asking "has nobody liked this" is a question with a known answer.
func (s *CatalogService) CampaignBySlug(slug, viewerID string) (*CampaignDetail, error) {
    var campaign models.Campaign

    // Preload pulls the many-to-many in a second query keyed by the ids found
    // in the first, rather than a join that repeats every campaign column once
    // per product.
    err := s.DB.
        Preload("Products").
        Where("slug = ?", slug).
        Where("archived_at IS NULL").
        First(&campaign).Error
    if errors.Is(err, gorm.ErrRecordNotFound) {
        return nil, ErrNotFound
    }
    if err != nil {
        return nil, fmt.Errorf("fetching campaign %q: %w", slug, err)
    }

    detail := CampaignDetail{Campaign: campaign, Products: campaign.Products}

    if err := s.DB.Model(&models.CampaignLike{}).
        Where("campaign_id = ?", campaign.ID).
        Count(&detail.Likes).Error; err != nil {
        return nil, fmt.Errorf("counting likes: %w", err)
    }

    if viewerID != "" {
        var mine int64
        if err := s.DB.Model(&models.CampaignLike{}).
            Where("campaign_id = ? AND user_id = ?", campaign.ID, viewerID).
            Count(&mine).Error; err != nil {
            return nil, fmt.Errorf("checking like: %w", err)
        }
        detail.Liked = mine > 0
    }

    return &detail, nil
}

package models

import (
    "time"

    "gorm.io/gorm"

    "shop/apps/api/internal/ids"
)

// CampaignLike is one user liking one campaign.
//
// A join row rather than a counter on Campaign. A counter cannot answer "has
// this user already liked it", which is the first thing the button needs to
// know, and two people liking at once would race on a read-modify-write.
type CampaignLike struct {
    ID string `gorm:"primarykey;size:36" json:"id"`

    // The pair is unique, so liking twice is refused by the database rather
    // than by a check that two concurrent requests can both pass.
    UserID     string `gorm:"size:36;not null;uniqueIndex:idx_campaign_like,priority:1" json:"user_id"`
    CampaignID string `gorm:"size:36;not null;uniqueIndex:idx_campaign_like,priority:2" json:"campaign_id"`

    CreatedAt time.Time `json:"created_at"`
}

func (m *CampaignLike) BeforeCreate(tx *gorm.DB) error {
    if m.ID == "" {
        m.ID = ids.New()
    }
    return nil
}

func Models() []interface{} {
    return []interface{}{
        &User{},
        // ...
        &CampaignLike{},
        // grit:models
    }
}

// LikeCampaign records that a user likes a campaign, and returns the new total.
//
// Idempotent: liking twice leaves one row and is not an error. The button can
// be double-clicked and the request can be retried by a flaky network, and
// neither should produce a second like or a red toast.
//
// FirstOrCreate rather than "check, then insert", because two requests can
// both pass the check. The unique index is what actually enforces this;
// FirstOrCreate just avoids hitting it in the common case.
func (s *CatalogService) LikeCampaign(campaignID, userID string) (int64, error) {
    var campaign models.Campaign
    err := s.DB.Select("id").Where("id = ?", campaignID).First(&campaign).Error
    if errors.Is(err, gorm.ErrRecordNotFound) {
        return 0, ErrNotFound
    }
    if err != nil {
        return 0, fmt.Errorf("loading campaign: %w", err)
    }

    like := models.CampaignLike{CampaignID: campaignID, UserID: userID}
    if err := s.DB.
        Where("campaign_id = ? AND user_id = ?", campaignID, userID).
        FirstOrCreate(&like).Error; err != nil {
        return 0, fmt.Errorf("liking campaign: %w", err)
    }

    return s.campaignLikes(campaignID)
}

// UnlikeCampaign removes a like. Removing one that is not there is not an
// error either, for the same reason.
func (s *CatalogService) UnlikeCampaign(campaignID, userID string) (int64, error) {
    if err := s.DB.
        Where("campaign_id = ? AND user_id = ?", campaignID, userID).
        Delete(&models.CampaignLike{}).Error; err != nil {
        return 0, fmt.Errorf("unliking campaign: %w", err)
    }
    return s.campaignLikes(campaignID)
}

func (s *CatalogService) campaignLikes(campaignID string) (int64, error) {
    var n int64
    err := s.DB.Model(&models.CampaignLike{}).
        Where("campaign_id = ?", campaignID).
        Count(&n).Error
    return n, err
}

package handlers

import (
    "errors"
    "net/http"
    "strconv"

    "github.com/gin-gonic/gin"
    "gorm.io/gorm"

    "shop/apps/api/internal/services"
)

// CatalogHandler holds a service, not a *gorm.DB. Every method below reads the
// request, calls one service method, and turns the result into a status code.
type CatalogHandler struct {
    Catalog *services.CatalogService
}

func NewCatalogHandler(db *gorm.DB) *CatalogHandler {
    return &CatalogHandler{Catalog: &services.CatalogService{DB: db}}
}

// fail() is not defined here. It already exists in this package, in
// recovery.go, and writes the { "error": { "code", "message" } } envelope every
// Grit endpoint uses. Handlers share one package, so a second copy is a
// compile error rather than a quiet inconsistency.

// GET /api/v1/public/categories/featured?limit=8
func (h *CatalogHandler) FeaturedCategories(c *gin.Context) {
    // Atoi returns 0 on anything unparseable, and the service treats 0 as
    // "use the default". A missing or nonsense limit is not worth a 400.
    limit, _ := strconv.Atoi(c.Query("limit"))

    items, err := h.Catalog.FeaturedCategories(limit)
    if err != nil {
        fail(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to fetch featured categories")
        return
    }
    c.JSON(http.StatusOK, gin.H{"data": items})
}

// GET /api/v1/public/categories/with-counts
func (h *CatalogHandler) CategoriesWithCounts(c *gin.Context) {
    rows, err := h.Catalog.CategoriesWithProductCounts()
    if err != nil {
        fail(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to fetch categories")
        return
    }
    c.JSON(http.StatusOK, gin.H{"data": rows})
}

// GET /api/v1/public/campaigns/:key/detail
//
// The parameter is :key, not :slug, and that is not a preference. Gin builds
// one routing tree, so two routes sharing a path position must name the
// wildcard there identically. The generated route is /campaigns/:key, so this
// one has to be :key too, and registering :slug panics the router at boot.
func (h *CatalogHandler) CampaignDetail(c *gin.Context) {
    detail, err := h.Catalog.CampaignBySlug(c.Param("key"), c.GetString("user_id"))
    if errors.Is(err, services.ErrNotFound) {
        fail(c, http.StatusNotFound, "NOT_FOUND", "Campaign not found")
        return
    }
    if err != nil {
        fail(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to fetch campaign")
        return
    }
    c.JSON(http.StatusOK, gin.H{"data": detail})
}

// POST /api/v1/campaigns/:id/like
//
// The user id comes from the token, never from the body: a user_id in the
// request would let anyone like on somebody else's behalf.
func (h *CatalogHandler) LikeCampaign(c *gin.Context) {
    userID := c.GetString("user_id")
    if userID == "" {
        fail(c, http.StatusUnauthorized, "UNAUTHORIZED", "Sign in to like a campaign")
        return
    }

    likes, err := h.Catalog.LikeCampaign(c.Param("id"), userID)
    if errors.Is(err, services.ErrNotFound) {
        fail(c, http.StatusNotFound, "NOT_FOUND", "Campaign not found")
        return
    }
    if err != nil {
        fail(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to like campaign")
        return
    }
    c.JSON(http.StatusOK, gin.H{
        "data":    gin.H{"likes": likes, "liked": true},
        "message": "Campaign liked",
    })
}

// DELETE /api/v1/campaigns/:id/like
//
// The mirror image, and worth having: a like button that cannot be undone is a
// like button people stop pressing.
func (h *CatalogHandler) UnlikeCampaign(c *gin.Context) {
    userID := c.GetString("user_id")
    if userID == "" {
        fail(c, http.StatusUnauthorized, "UNAUTHORIZED", "Sign in to like a campaign")
        return
    }

    likes, err := h.Catalog.UnlikeCampaign(c.Param("id"), userID)
    if err != nil {
        fail(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to unlike campaign")
        return
    }
    c.JSON(http.StatusOK, gin.H{
        "data":    gin.H{"likes": likes, "liked": false},
        "message": "Campaign unliked",
    })
}

package routes

import (
    "shop/apps/api/internal/handlers"
)

// Storefront routes: the endpoints this project added by hand.
//
// Its own file, next to the generated <resource>_routes.go files, and it works
// the same way: an init() that registers itself, so nothing else has to know
// this file exists. "grit generate resource" will never touch it, and
// "grit remove resource" will never delete it.
func init() {
    RegisterRoutes(func(m *Mount) {
        h := handlers.NewCatalogHandler(m.DB)

        // Public: no login. The group already requires an API key.
        //
        // "/categories/featured" is registered alongside the generated
        // "/categories/:key". Gin routes a static segment ahead of a
        // parameter, so /categories/featured reaches this and
        // /categories/laptops reaches the generated handler.
        m.Public.GET("/categories/featured", h.FeaturedCategories)
        m.Public.GET("/categories/with-counts", h.CategoriesWithCounts)
        m.Public.GET("/campaigns/:key/detail", h.CampaignDetail)

        // Protected: a valid JWT or API key. The middleware on this group has
        // already rejected everyone else before the handler runs.
        m.Protected.POST("/campaigns/:id/like", h.LikeCampaign)
        m.Protected.DELETE("/campaigns/:id/like", h.UnlikeCampaign)
    })
}

$grit migrate            # creates campaign_likes
$cd apps/api && go build ./...
$grit start

# public: needs an API key, no login
$curl -H "X-API-Key: $KEY" \
$  http://localhost:8080/api/v1/public/categories/featured?limit=8
# {"data":[{"name":"Phones",...},{"name":"Laptops",...}]}
$curl -H "X-API-Key: $KEY" \
$  http://localhost:8080/api/v1/public/categories/with-counts
# {"data":[{"name":"Accessories","product_count":9}, ...]}
# protected: needs a token
$curl -X POST -H "Authorization: Bearer $TOKEN" \
$  http://localhost:8080/api/v1/campaigns/$ID/like
# {"data":{"liked":true,"likes":1},"message":"Campaign liked"}
# without one
$curl -X POST http://localhost:8080/api/v1/campaigns/$ID/like
# 401 {"error":{"code":"UNAUTHORIZED","message":"Authentication required"}}

import type { Campaign, Category, Product } from "@repo/shared/types";

// No NEXT_PUBLIC_ prefix. That prefix is what ships a variable to the browser,
// and this key must not go there.
const API = process.env.API_URL ?? "http://localhost:8080";
const KEY = process.env.GRIT_API_KEY!;

export type CategoryWithCount = Category & { product_count: number };

// Mirrors the CampaignDetail struct the service returns. Category, Campaign
// and Product all come from @repo/shared/types, generated from the Go models,
// so those three cannot drift from the API.
export type CampaignDetail = {
  campaign: Campaign;
  products: Product[];
  likes: number;
  liked: boolean;
};

async function publicGet<T>(path: string, revalidate = 60): Promise<T> {
  const res = await fetch(`${API}/api/v1/public${path}`, {
    headers: { "X-API-Key": KEY },
    // Cache the response for a minute. Without this, Next fetches on every
    // request and the API sees your traffic rather than your cache.
    next: { revalidate },
  });
  if (!res.ok) {
    throw new Error(`${path} failed: ${res.status}`);
  }
  const body = await res.json();
  return body.data as T;
}

export const getFeaturedCategories = (limit = 8) =>
  publicGet<Category[]>(`/categories/featured?limit=${limit}`);

export const getCategoriesWithCounts = () =>
  publicGet<CategoryWithCount[]>("/categories/with-counts");

export const getCampaign = (slug: string) =>
  publicGet<CampaignDetail>(`/campaigns/${slug}/detail`);

import Image from "next/image";
import Link from "next/link";
import { getFeaturedCategories } from "@/lib/catalog";

// A server component. It runs on the server, so the API key stays there and
// the browser is sent finished HTML.
export default async function HomePage() {
  const categories = await getFeaturedCategories(8);

  return (
    <section className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {categories.map((c) => (
        <Link key={c.id} href={`/categories/${c.slug}`} className="group">
          {c.image && (
            <Image
              src={c.image.url}
              alt={c.name}
              width={600}
              height={400}
              className="rounded-lg object-cover aspect-[3/2]"
            />
          )}
          <h3 className="mt-2 font-medium group-hover:underline">{c.name}</h3>
        </Link>
      ))}
    </section>
  );
}

import { notFound } from "next/navigation";
import { getCampaign } from "@/lib/catalog";
import { LikeButton } from "./like-button";

export default async function CampaignPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  let detail;
  try {
    detail = await getCampaign(slug);
  } catch {
    // The service returned ErrNotFound, the handler made it a 404, and the
    // fetch helper threw. This page turns that into Next's own 404.
    notFound();
  }

  return (
    <article>
      <h1 className="text-3xl font-bold">{detail.campaign.title}</h1>
      <p className="text-muted-foreground">{detail.campaign.subtitle}</p>

      {/* Server-rendered count, then a client component takes over. */}
      <LikeButton
        campaignId={detail.campaign.id}
        initialLikes={detail.likes}
        initialLiked={detail.liked}
      />

      <ul className="mt-8 grid grid-cols-3 gap-4">
        {detail.products.map((p) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </article>
  );
}

"use client";

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { apiClient } from "@/lib/api";

export function LikeButton({
  campaignId,
  initialLikes,
  initialLiked,
}: {
  campaignId: string;
  initialLikes: number;
  initialLiked: boolean;
}) {
  const [likes, setLikes] = useState(initialLikes);
  const [liked, setLiked] = useState(initialLiked);
  const qc = useQueryClient();

  const toggle = useMutation({
    mutationFn: async () => {
      // apiClient rewrites /api/... to /api/v1/... and sends the session
      // cookie, so this is the protected endpoint, not the public one.
      const { data } = liked
        ? await apiClient.delete(`/api/campaigns/${campaignId}/like`)
        : await apiClient.post(`/api/campaigns/${campaignId}/like`);
      return data.data as { likes: number; liked: boolean };
    },
    onSuccess: (d) => {
      setLikes(d.likes);
      setLiked(d.liked);
      qc.invalidateQueries({ queryKey: ["campaigns", campaignId] });
    },
    onError: (err: any) => {
      // 401 means signed out. Everything else is a real failure.
      if (err?.response?.status === 401) {
        window.location.href = "/login";
      }
    },
  });

  return (
    <button
      onClick={() => toggle.mutate()}
      disabled={toggle.isPending}
      aria-pressed={liked}
      className="inline-flex items-center gap-2 rounded-lg border px-4 py-2 disabled:opacity-50"
    >
      <span aria-hidden>{liked ? "♥" : "♡"}</span>
      {likes} {likes === 1 ? "like" : "likes"}
    </button>
  );
}

import { createServerFn } from "@tanstack/react-start";
import type { Category } from "@repo/shared/types";

// createServerFn keeps this on the server, so the API key is never bundled.
export const getFeaturedCategories = createServerFn({ method: "GET" })
  .validator((limit: number) => limit)
  .handler(async ({ data: limit }) => {
    const res = await fetch(
      `${process.env.API_URL}/api/v1/public/categories/featured?limit=${limit}`,
      { headers: { "X-API-Key": process.env.GRIT_API_KEY! } },
    );
    if (!res.ok) throw new Error(`featured failed: ${res.status}`);
    const body = await res.json();
    return body.data as Category[];
  });

import { createFileRoute } from "@tanstack/react-router";
import { getFeaturedCategories } from "@/lib/catalog";

export const Route = createFileRoute("/")({
  // The loader runs before the component renders, so there is no spinner and
  // no layout shift on first paint.
  loader: () => getFeaturedCategories({ data: 8 }),
  component: Home,
});

function Home() {
  const categories = Route.useLoaderData();

  return (
    <section className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {categories.map((c) => (
        <a key={c.id} href={`/categories/${c.slug}`}>
          {c.image && <img src={c.image.url} alt={c.name} className="rounded-lg" />}
          <h3 className="mt-2 font-medium">{c.name}</h3>
        </a>
      ))}
    </section>
  );
}

import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { apiClient } from "@/lib/api";

// Identical to the Next.js version. Both apps use React Query and the same
// generated apiClient, so anything you write for one works in the other.
export function LikeButton({ campaignId, initialLikes, initialLiked }: {
  campaignId: string; initialLikes: number; initialLiked: boolean;
}) {
  const [likes, setLikes] = useState(initialLikes);
  const [liked, setLiked] = useState(initialLiked);

  const toggle = useMutation({
    mutationFn: async () => {
      const { data } = liked
        ? await apiClient.delete(`/api/campaigns/${campaignId}/like`)
        : await apiClient.post(`/api/campaigns/${campaignId}/like`);
      return data.data as { likes: number; liked: boolean };
    },
    onSuccess: (d) => { setLikes(d.likes); setLiked(d.liked); },
  });

  return (
    <button onClick={() => toggle.mutate()} disabled={toggle.isPending} aria-pressed={liked}>
      {liked ? "♥" : "♡"} {likes}
    </button>
  );
}