Memakai API di frontend

Marketing berbicara ke API produk lewat klien Hono bertipe plus TanStack Query. Tidak ada helper serverApi() dan tidak ada klien oRPC.

Setup client

import { createApiClient, handle } from "@repo/api/client";
import { clientEnv } from "@repo/env/client";

export const api = createApiClient(
	`${clientEnv.NEXT_PUBLIC_MARKETING_URL}/api`,
);
export { handle };

createApiClient membungkus hc<AppRouter> dengan credentials: "include" agar cookie sesi dikirim pada request same-site / CORS dengan credentials.

handle() menunggu respons, parse JSON, dan melempar Error dengan message dari API saat !res.ok.

Client component + TanStack Query

Bungkus pemanggilan bertipe dalam mutation (atau query) di apps/marketing/src/mutations/:

"use client";

import { useMutation } from "@tanstack/react-query";
import { api, handle } from "@/lib/api";
import type { CreateFeedbackData } from "@repo/validations/feedback";

export const useCreateFeedback = () => {
	return useMutation({
		mutationFn: (data: CreateFeedbackData) =>
			handle<{
				success: true;
				feedback: { id: string; type: string; createdAt: string };
			}>(api.feedback.$post({ json: data })),
	});
};

Pemanggilan memakai hook dari client component. Simpan mutation produk di jalur ini — jangan memakai klien Better Auth untuk itu, dan jangan menambahkan Server Action "use server" untuk fitur produk.

Server Components / RSC

Tidak ada serverApi(). Untuk RSC, lebih baik tidak memanggil API produk kecuali diperlukan; saat ini mutation produk marketing ada di sisi client. Jika harus memanggil dari server, gunakan fetch same-origin ke /api/… (atau panggil fungsi service langsung dari konteks server tepercaya) — jangan membuat helper bertipe paralel.

Pengecualian checkout storefront

Checkout storefront Mayar memakai route Next khusus, bukan modul billing Hono:

await fetch("/api/checkout", {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({ plan }),
});

Lihat apps/marketing/src/app/api/checkout/route.ts dan use-create-checkout.ts.

Terkait

• Mendefinisikan endpoint
• Melindungi endpoint
• Membangun fitur