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

[TOC]
# 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のマイグレーションが成功しているか

SPAMではありませんタイムスタンプを変更しない