#contents
* PrismaとGraphQLで作るシンプルなAPI - クイックスタート [#h0fa1001]

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

** 前提条件 [#w0b6f4e1]
- Node.js(16以上)がインストール済み
- npm または yarnがインストール済み
- データベース(今回はSQLite使用)

** 1. プロジェクトのセットアップ [#u971e841]
 # プロジェクトディレクトリの作成
 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の設定 [#zd158190]

 # 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スキーマとリゾルバーの作成 [#yfc46ea3]
`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. 実行と動作確認 [#p1a3ac71]

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
   }
 }

** 学んだこと [#l692cb56]
- PrismaでのデータモデルとDBマイグレーションの基本
- TypeGraphQLを使ったGraphQLスキーマの定義
- 基本的なCRUD操作の実装方法

** 次のステップ [#d1db96d5]
- 認証の追加
- エラーハンドリングの実装
- テストの追加
- より複雑なデータ関係の実装

** トラブルシューティング [#d3823d1b]
エラーが発生した場合は以下を確認してください:
1. すべての依存パッケージが正しくインストールされているか

2. TypeScriptの設定が正しいか

3. Prismaのマイグレーションが成功しているか
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS