空雲 Blog

Eye catchPrisma Studio の GraphQL 版を作ってみる

publication: 2025/03/31
update:2025/03/31
GraphQLTypeScript

Prisma Studio とは

Prisma Studio は、Prisma が提供する GUI ツールです。Prisma が提供する ORM ライブラリを使って作成したデータベースの内容を確認・編集できます。ただ、DB の内容の表示や操作に関して Prisma の要素は一切ありません。ただの DB 操作ツールです。

Prisma Studio の GraphQL 版を作ってみる

Prisma の以前のバージョンではエンジン部分のプロトコルに GraphQL が使われていました。そのため Prisma の文法と GraphQL の文法は類似要素が多くなっています。そのため、Prisma を扱うのに近い形で GraphQL のクエリを作成できます。

作成したパッケージです

https://www.npmjs.com/package/prisma-studio-graphql

使い方

prisma を使用しているプロジェクト内でprisma-studio-graphqlをインストール後、npx prisma-studio-graphqlを実行します。
プロジェクト内で prisma が使用可能であれば、そのまま GraphQL で DB を操作可能です。

1npm install -D prisma-studio-graphql
2npx prisma-studio-graphql

内部で使用しているパッケージ

名前用途
HonoWebServer
Pothos GraphQLGraphQL フレームワーク
graphql-yogaGraphQL サーバー
pothos-prisma-generatorPrisma のスキーマから GraphQL のスキーマを生成
graphql-auto-queryGraphQL のクエリを自動生成

Prisma スキーマから GraphQL スキーマを生成する処理の詳細はこちら
https://github.com/node-libraries/pothos-prisma-generator/tree/master/packages/pothos-prisma-generator

GraphQL スキーマからクエリを自動生成する処理はこちら
https://github.com/SoraKumo001/graphql-auto-query

コードの内容

主要機能は各プラグインが行っているので、それらを呼び出すだけで作業完了です。

  • builder.ts

各プラグインを設定して SchemaBuilder を作成します。

1import SchemaBuilder from "@pothos/core";
2import PrismaPlugin from "@pothos/plugin-prisma";
3import PrismaUtils from "@pothos/plugin-prisma-utils";
4import PothosPrismaGeneratorPlugin from "pothos-prisma-generator";
5import { prisma } from "./prisma.js";
6

7/**
8 * Create a new schema builder instance
9 */
10export const createBuilder = () => {
11  return new SchemaBuilder<{
12    Prisma: typeof prisma;
13  }>({
14    plugins: [PrismaPlugin, PrismaUtils, PothosPrismaGeneratorPlugin],
15    prisma: {
16      client: prisma,
17    },
18  });
19};
20

21export type Builder = ReturnType<typeof createBuilder>;

  • prisma.ts

PrismaClient を作成します。実際は各プロジェクト内の PrismaClient が使用されます。

1import { PrismaClient } from "@prisma/client";
2

3export const prisma = new PrismaClient({
4  log: [
5    {
6      emit: "stdout",
7      level: "warn",
8    },
9  ],
10});

  • index.ts

GraphQL Yoga に Schema を設定して Hono 経由で起動します。また、Playground に表示する Document を自動生成して、使用可能なクエリがひととおり表示されるようにします。

1#!/usr/bin/env node
2

3import { serve } from "@hono/node-server";
4import { explorer } from "apollo-explorer/html";
5import { generate } from "graphql-auto-query";
6import { createYoga } from "graphql-yoga";
7import { Hono, Context as HonoContext } from "hono";
8import { createBuilder } from "./builder.js";
9

10const builder = createBuilder();
11

12const schema = builder.toSchema({ sortSchema: false });
13const yoga = createYoga<HonoContext>({
14  graphqlEndpoint: "*",
15  schema,
16});
17

18const document = generate(schema, 1);
19

20const app = new Hono();
21app.get("/", (c) => {
22  return c.html(
23    explorer({
24      initialState: {
25        document,
26      },
27      endpointUrl: "/",
28      introspectionInterval: 5000,
29    })
30  );
31});
32app.mount("/", yoga);
33

34serve({ fetch: app.fetch, port: 5556 });
35

36console.log("http://localhost:5556/");