PrismaとGraphQLで作るシンプルなAPI - クイックスタート

はじめに

このチュートリアルでは、PrismaとGraphQLを使って簡単なユーザー情報を扱うAPIを作成します。 所要時間：約30分

前提条件

• Node.js（16以上）がインストール済み
• npm または yarnがインストール済み
• データベース（今回はSQLite使用）

1. プロジェクトのセットアップ

# プロジェクトディレクトリの作成
mkdir prisma-graphql-demo
cd prisma-graphql-demo

# package.jsonの初期化
npm init -y

# 必要なパッケージのインストール
npm install typescript ts-node @types/node prisma @prisma/client apollo-server-express graphql type-graphql reflect-metadata express

# TypeScript設定
npx tsc --init

2. Prismaの設定

# Prismaの初期化
npx prisma init

# prisma/schema.prismaを以下の内容で作成

prisma datasource db { provider = "sqlite" url = "file:./dev.db" }

generator client {
  provider = "prisma-client-js"
}

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}

bash

データベースマイグレーション

npx prisma migrate dev --name init

3. GraphQLスキーマとリゾルバーの作成

src/index.ts を作成:

typescript import 'reflect-metadata'; import { ApolloServer } from 'apollo-server-express'; import { buildSchema } from 'type-graphql'; import { PrismaClient } from '@prisma/client'; import express from 'express'; import { ObjectType, Field, ID, Resolver, Query, Mutation, Arg } from 'type-graphql';

// Prismaクライアントのインスタンス化
const prisma = new PrismaClient();

// User型の定義
@ObjectType()
class User {
  @Field(() => ID)
  id: number;

  @Field()
  name: string;

  @Field()
  email: string;
}

// リゾルバーの定義
@Resolver(User)
class UserResolver {
  // ユーザー一覧取得
  @Query(() => [User])
  async users() {
    return prisma.user.findMany();
  }

  // ユーザー作成
  @Mutation(() => User)
  async createUser(
    @Arg('name') name: string,
    @Arg('email') email: string,
  ) {
    return prisma.user.create({
      data: {
        name,
        email,
      },
    });
  }
}

// サーバーの起動
async function main() {
  const app = express();

  const schema = await buildSchema({
    resolvers: [UserResolver],
  });

  const server = new ApolloServer({
    schema,
  });

  await server.start();
  server.applyMiddleware({ app });

  app.listen(4000, () => {
    console.log('Server is running on http://localhost:4000/graphql');
  });
}

main().catch(console.error);

4. 実行と動作確認

bash

サーバー起動

npx ts-node src/index.ts

ブラウザで http://localhost:4000/graphql にアクセスし、以下のクエリを試してみましょう：

graphql

ユーザー作成

mutation {
  createUser(name: "John Doe", email: "john@example.com") {
    id
    name
    email
  }
}

# ユーザー一覧取得
query {
  users {
    id
    name
    email
  }
}

学んだこと

• PrismaでのデータモデルとDBマイグレーションの基本
• TypeGraphQLを使ったGraphQLスキーマの定義
• 基本的なCRUD操作の実装方法

次のステップ

• 認証の追加
• エラーハンドリングの実装
• テストの追加
• より複雑なデータ関係の実装

トラブルシューティング

エラーが発生した場合は以下を確認してください：

1. すべての依存パッケージが正しくインストールされているか

2. TypeScriptの設定が正しいか

3. Prismaのマイグレーションが成功しているか

最新の30件