PrismaとGraphQLで作るシンプルなAPI - クイックスタート
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
* PrismaとGraphQLで作るシンプルなAPI - クイックスタート [...
** はじめに [#g35c60bf]
このチュートリアルでは、PrismaとGraphQLを使って簡単なユー...
所要時間：約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 @prism...
# 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, Mutatio...
// 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:4...
});
}
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のマイグレーションが成功しているか
終了行:
#contents
* PrismaとGraphQLで作るシンプルなAPI - クイックスタート [...
** はじめに [#g35c60bf]
このチュートリアルでは、PrismaとGraphQLを使って簡単なユー...
所要時間：約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 @prism...
# 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, Mutatio...
// 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:4...
});
}
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のマイグレーションが成功しているか
ページ名:
