使用Next.js + GrapqhQL搭建Todo应用程序（上篇）

2 年 ago

宇, 华

2 minutes

首先

最近我学习了GraphQL，使用Next.js + GraphQL + GraphQL CodeGenerator + Prisma的结构构建了一个Todo应用程序，我将在这里进行解释并记录下来。

环境

v18.13.0

pnpm

7.27.0

【前編】
上述句子有以下為您提供的中文翻譯：

1. 第一部分
2. 前一部分
3. 開始的一部分
4. 前面的編輯
5. 前段
6. 前面部分

第一章是准备阶段。

下一个创造应用

2. 建立 GraphQL 伺服器。

3. 訂閱

在Next.js的API路由中，无法使用WebSockets。要使用GraphQL API、WebSocket和其余的Next.js内容，需要创建一个定制的Next.js服务器。

引用：Next.js API 路由不能与 WebSockets 一起使用，因此我们需要创建一个自定义的 Next.js 服务器来提供 GraphQL API、WebSockets 和其他 Next.js 内容。

由于本次构建API路由的GraphQL服务器并且制作Todo应用，我们决定不使用订阅功能，因此将跳过此设置。

4. 数据库·棱镜

DBにはPostgreSQLを採用しました

4-1. PostgreSQL
4-1. PostgreSQL

compose.ymlファイルの作成
$ touch compose.yml

compose.yml
version: ‘3.9’

services:
db:
image: postgres:15.1
ports:
– 5432:5432
volumes:
– postgres:/var/lib/postgresql/data
environment:
– POSTGRES_USER=user # 自分で変更してください
– POSTGRES_PASSWORD=password # 自分で変更してください
– POSTGRES_DB=graphql-todo # 自分で変更してください
volumes:
postgres:

docker compose up -d

Prisma设置为4-2.

prisma是可在Node.js和TypeScript中使用的ORM（对象关系映射）工具。

install
pnpm add prisma @prisma/client

init
pnpm prisma init

.envにDATABASE_URLを記述します。

.env
DATABASE_URL=”postgresql://user:password@localhost:5432/graphql-todo?schema=public”

url通过使用compose.yml中设置的变量组成，将变成postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}schema=public。

Todoテーブルの作成

prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
provider = “prisma-client-js”
}

datasource db {
provider = “postgresql”
url = env(“DATABASE_URL”)
}

+ model Todo {
+ id String @id @default(cuid())
+ content String
+ done Boolean @default(false)
+ createdAt String
+ }

migrate
$ pnpm prisma migrate dev
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource “db”: PostgreSQL database “graphql-todo”, schema “public” at “localhost:5432”

? Enter a name for the new migration: › addTodoTable
Applying migration `20230413102125_add_todo_table`

The following migration(s) have been created and applied from new schema changes:

migrations/
└─ 20230413102125_add_todo_table/
└─ migration.sql

Your database is now in sync with your schema.

migrateが成功すると、prisma/にmigrationsディレクトリが作成され、中に実行されたSQLが入ったmigrationファイルが作成されます。
RubyOnRailsのORMである、Active Recordに慣れている人には割とイメージしやすいファイル構成かもしれません。
.
├── prisma
│ ├── migrations
│ │ ├── yyyyMMddhhmmss
│ │ │ └─ migration.sql
│ │ └─ migration_lock.toml
| └─ prisma.schema

下一次：GraphQL

GraphQL Schema
GraphQL Context
GraphQL Code Generator
GraphQL Resolver
GraphQLサーバー修正

首先

环境

目录

【前編】 上述句子有以下為您提供的中文翻譯：