💡

【Drizzle ORM】NextJs14 と Drizzle ORM【#１０ Hono RPC 】

2024/07/27に公開

Next.js

【#１０ Hono RPC 】

YouTube: https://youtu.be/NYamz_cXXic
https://youtu.be/NYamz_cXXic

今回はサーバーサイドで設定した型を
クライアントサイドでもシェアできるように
「RPC」を設定します。

https://hono.dev/docs/guides/rpc

まずはドキュメントに従って、
各ルートのメソッドをHonoのインスタンスに
チェインしていきます。

app/api/[[...route]]/user.ts

import { Hono } from "hono";

import { db } from "@/db/drizzle";
import { users } from "@/db/schema";
import { eq } from "drizzle-orm";

const app = new Hono()
  .get("/", async (c) => {
    const data = await db.select().from(users);

    return c.json({
      users: data,
    });
  })
  .get("/:id", async (c) => {
    const id = c.req.param("id");

    const data = await db.select().from(users).where(eq(users.id, id));

    return c.json({
      user: data,
    });
  });

export default app;

app/api/[[...route]]/user.ts

import { Hono } from "hono";
import { handle } from "hono/vercel";

import users from "./users";

export const runtime = "edge";

const app = new Hono().basePath("/api");

const routes = app.route("/users", users);

export const GET = handle(app);
export const POST = handle(app);
export const PATCH = handle(app);
export const DELETE = handle(app);

export type AppType = typeof routes;

ルートのタイプを「AppType」として定義して、
こちらを「Hono」のクライアントに渡します。

lib/hono.ts

import { hc } from "hono/client";
import { AppType } from "@/app/api/[[...route]]/route";

export const client = hc<AppType>(process.env.NEXT_PUBLIC_APP_URL!);

DATABASE_URL=postgresql://myap.....................

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZGVsaW..................
CLERK_SECRET_KEY=sk_test_4ld0PnCNzA..................

WEBHOOK_SECRET=whsec_ZOA7os2eU................

NEXT_PUBLIC_APP_URL=http://localhost:3000

ngrokを起動する場合は「http://localhost:3000」を
ngrokのドメインに変更してください。

デプロイ後は「http://localhost:3000」を
デプロイ後のドメインに変更します。

【#１０ Hono RPC 】

Discussion