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

↑

はじめに †

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

↑

前提条件 †

↑

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

学んだこと †

↑

次のステップ †

↑

トラブルシューティング †

エラーが発生した場合は以下を確認してください： 1. すべての依存パッケージが正しくインストールされているか 2. TypeScript?の設定が正しいか 3. Prismaのマイグレーションが成功しているか

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS