介紹

在本節(jié)中，您將設(shè)置構(gòu)建 GraphQL API 所需的所有部分。您將啟動一個 TypeScript 項目，預(yù)置一個 PostgreSQL 數(shù)據(jù)庫，在項目中初始化 Prisma，最后為您的數(shù)據(jù)庫設(shè)定種子。

在此過程中，您將設(shè)置端到端類型安全難題的一個重要部分：數(shù)據(jù)形狀的真實來源。

創(chuàng)建 TypeScript 項目

首先，在您的工作目錄中創(chuàng)建一個新文件夾，該文件夾將包含您想要的任何位置 GraphQL 服務(wù)器的代碼：

mkdir graphql-server # Example folder

該項目將使用?npm（Node.js 的包管理器）來管理和安裝新包。導(dǎo)航到新文件夾并使用以下命令初始化 npm：

cd graphql-server

npm init -y

安裝基本軟件包

在構(gòu)建此 API 時，您將安裝各種有助于開發(fā)應(yīng)用程序的軟件包?，F(xiàn)在，請安裝以下開發(fā)包：

• ts-node-dev：允許您在文件更改時執(zhí)行 TypeScript 代碼并實時重新加載
• typescript：允許您為 JavaScript 應(yīng)用程序提供類型的 TypeScript 包
• @types/node：Node.js的 TypeScript 類型定義

npm i -D ts-node-dev typescript @types/node

注意：這些依賴項作為開發(fā)依賴項安裝，因為它們僅在開發(fā)期間需要。它們都不是生產(chǎn)部署的一部分。

設(shè)置 TypeScript

在項目中安裝 TypeScript 后，您現(xiàn)在可以使用命令行界面工具 （CLI） 初始化 TypeScript 配置文件：tsc

npx tsc --init

上述命令將創(chuàng)建一個名為 at your project root 的新文件，并附帶一組用于如何編譯和處理 TypeScript 代碼的默認配置。 對于本系列，您將保留默認設(shè)置。tsconfig.json

創(chuàng)建一個名為 的新文件夾，并在該文件夾中創(chuàng)建一個名為 的新文件 ：srcindex.ts

mkdir srctouch src/index.ts

這將是 TypeScript 代碼的入口點。在該文件中，添加一個簡單的 ：console.log

// src/index.ts


console.log('Hey there! ??');

添加開發(fā)腳本

為了運行您的代碼，您將使用 ，它將編譯和運行 TypeScript 代碼并監(jiān)視文件更改。 當應(yīng)用程序中的文件發(fā)生更改時，它將重新編譯并重新運行您的代碼。ts-node-dev

在 的 部分中，添加一個名為 的新腳本，該腳本用于運行您的入口文件：package.json"scripts""dev"ts-node-dev

// package.json


// ..."scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "dev": "ts-node-dev src/index.ts"},// ...

您現(xiàn)在可以使用以下命令運行代碼：

npm run dev

設(shè)置數(shù)據(jù)庫

您將設(shè)置的下一個部分是數(shù)據(jù)庫。您將為此應(yīng)用程序使用 PostgreSQL 數(shù)據(jù)庫。托管和使用 a 的方式有很多種 PostgreSQL 數(shù)據(jù)庫，但是，最簡單的方法之一是使用?Railway?部署數(shù)據(jù)庫。

創(chuàng)建帳戶并登錄后，您應(yīng)該會看到如下頁面：

打 新建項目 按鈕，或只需單擊 創(chuàng)建新項目 區(qū)域。

您將看到一個搜索框和一些常用選項。選擇 Provision PostgreSQL 選項。

上面選擇的選項將創(chuàng)建一個新的 PostgreSQL 數(shù)據(jù)庫并進行部署。服務(wù)器準備就緒后，您應(yīng)該在屏幕上看到預(yù)置的數(shù)據(jù)庫。單擊 PostgreSQL 實例。

這將打開一個帶有幾個不同選項卡的菜單。在 Connect （連接） 選項卡上，您將找到數(shù)據(jù)庫的連接字符串。記下在哪里可以找到這個字符串，因為你很快就會用到它們。

設(shè)置 Prisma

接下來，您將設(shè)置 Prisma。您的 GraphQL 服務(wù)器將使用 Prisma Client 查詢您的 PostgreSQL 數(shù)據(jù)庫。

要設(shè)置 Prisma，您首先需要將 Prisma CLI 安裝為開發(fā)依賴項：

npm i -D prisma

初始化 Prisma

安裝 Prisma CLI 后，您將可以訪問 Prisma 提供的一組有用的工具和命令。您將在此處使用的命令稱為 ，它將在您的項目中初始化 Prisma：init

npx prisma init

此命令將在項目中創(chuàng)建一個新文件夾。在此文件夾中，您將找到一個文件 ，其中包含 Prisma 架構(gòu)的開頭。prismaschema.prisma

該文件使用 Prisma 架構(gòu)語言 （PSL），您可以在其中定義數(shù)據(jù)庫的表和字段。它目前如下所示：

// prisma/schema.prisma


generator client {  provider = "prisma-client-js"}

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

在塊中，記下該字段。此字段等于 value 。此值指示 Prisma 在環(huán)境變量中查找 變量來查找數(shù)據(jù)庫的連接字符串。datasourceurlenv("DATABASE_URL")DATABASE_URL

設(shè)置環(huán)境變量

prisma init還為您創(chuàng)建了一個文件，其中包含一個名為 的變量。此變量保存 Prisma 將用于連接到數(shù)據(jù)庫的連接字符串。.envDATABASE_URL

將該變量的當前默認內(nèi)容替換為您通過 Railway UI 檢索的連接字符串：

# .env


# Example: postgresql://postgres:Pb98NuLZM22ptNuR4Erq@containers-us-west-63.railway.app:6049/railwayDATABASE_URL="<your-connection-string>" 

對數(shù)據(jù)進行建模

您正在構(gòu)建的應(yīng)用程序?qū)⑿枰獌蓚€不同的數(shù)據(jù)庫表：和 .每個 “用戶” 將能夠擁有許多關(guān)聯(lián)的 “消息”。UserMessage

首先對表進行建模。此表將需要以下列：User

• id：數(shù)據(jù)庫記錄的唯一 ID
• name：用戶的名稱
• createdAt：創(chuàng)建每個用戶時的時間戳

添加以下內(nèi)容model塊添加到您的 Prisma 架構(gòu)中：

// prisma/schema.prisma


model User {  id        Int      @id @default(autoincrement())  name      String  createdAt DateTime @default(now())}

接下來，添加具有以下字段的模型：Message

• id：數(shù)據(jù)庫記錄的唯一 ID
• body：消息的內(nèi)容
• createdAt：創(chuàng)建每條消息時的時間戳

// prisma/schema.prisma


model Message {  id        Int      @id @default(autoincrement())  body   String  createdAt DateTime @default(now())}

最后，在 和 表之間設(shè)置一對多關(guān)系。UserMessage

// prisma/schema.prisma


model User {  id        Int       @id @default(autoincrement())  name      String  createdAt DateTime  @default(now())+  messages  Message[]}

model Message {  id        Int      @id @default(autoincrement())  body   String  createdAt DateTime @default(now())+  userId    Int+  user      User     @relation(fields: [userId], references: [id])}

這個數(shù)據(jù)建模步驟很重要。您在此處所做的是設(shè)置數(shù)據(jù)形狀的真實來源。 數(shù)據(jù)庫的架構(gòu)現(xiàn)在在一個中心位置定義，并用于生成與該數(shù)據(jù)庫交互的類型安全 API。

注意：將 Prisma 架構(gòu)視為數(shù)據(jù)庫形狀與與之交互的 API 之間的粘合劑。

執(zhí)行第一次遷移

您的數(shù)據(jù)庫架構(gòu)現(xiàn)已建模，您可以將此架構(gòu)應(yīng)用于數(shù)據(jù)庫。您將使用 Prisma Migrate 來管理數(shù)據(jù)庫遷移。

運行以下命令以創(chuàng)建遷移并將其應(yīng)用于數(shù)據(jù)庫：

npx prisma migrate dev --name init

上述命令將創(chuàng)建一個名為 的新遷移文件，將該遷移應(yīng)用于您的數(shù)據(jù)庫，最后根據(jù)該架構(gòu)生成 Prisma Client。init

如果您返回 Railway UI，在 Data （數(shù)據(jù)） 選項卡中，您應(yīng)該會看到列出的表格。如果是這樣，則遷移成功，您的數(shù)據(jù)庫已準備好投入使用！

設(shè)定數(shù)據(jù)庫??種子

在開始構(gòu)建 GraphQL API 之前，最后要做的是用一些初始數(shù)據(jù)為數(shù)據(jù)庫設(shè)定種子，以便您進行交互。

在該文件夾中，創(chuàng)建一個名為 的新文件 ：prismaseed.ts

touch prisma/seed.ts

將以下內(nèi)容粘貼到該文件中：

// prisma/seed.ts


import { PrismaClient } from "@prisma/client";const prisma = new PrismaClient();

async function main() {  // Delete all User and Message records  await prisma.message.deleteMany({});  await prisma.user.deleteMany({});  // (Re-)Create dummy User and Message records  await prisma.user.create({    data: {      name: "Jack",      messages: {        create: [          {            body: "A Note for Jack",          },          {            body: "Another note for Jack",          },        ],      },    },  });  await prisma.user.create({    data: {      name: "Ryan",      messages: {        create: [          {            body: "A Note for Ryan",          },          {            body: "Another note for Ryan",          },        ],      },    },  });  await prisma.user.create({    data: {      name: "Adam",      messages: {        create: [          {            body: "A Note for Adam",          },          {            body: "Another note for Adam",          },        ],      },    },  });}
main().then(() => {  console.log("Data seeded...");});

此腳本將清除數(shù)據(jù)庫，然后創(chuàng)建三個用戶。每個用戶都會獲得兩條與其關(guān)聯(lián)的消息。

現(xiàn)在種子腳本可用，請前往您的文件并將以下鍵添加到 JSON 對象中：package.json

// package.json

// ..."prisma": {  "seed": "ts-node-dev prisma/seed.ts"},// ...

使用以下命令運行種子腳本：

npx prisma db seed

運行腳本后，如果您返回 Railway UI 并進入 Data 選項卡，您應(yīng)該能夠瀏覽新添加的數(shù)據(jù)。

總結(jié)和下一步是什么

在本文中，您將設(shè)置構(gòu)建 GraphQL API 所需的所有部分。在此過程中，您需要：

• 設(shè)置一個將保存 GraphQL 服務(wù)器的 TypeScript 項目
• 使用 Railway 啟動 PostgreSQL 數(shù)據(jù)庫
• 初始化的 Prisma
• 已對數(shù)據(jù)庫架構(gòu)進行建模
• 為數(shù)據(jù)庫設(shè)定種子

原文來源：https://www.prisma.io/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej

#你可能也喜歡這些API文章!

什么是GPT-4？完整指南

GitLabAPI上傳壓縮包的完整指南

Go調(diào)用GitLabAPI的全面指南

GitLabAPI獲取root令牌及使用指南

使用Java GitLab API獲取項目分支信息

GitLabAPI獲取所有文件的解決方案

CanvasAPI是什么及其應(yīng)用詳解

基于Docker方式搭建GitLab

基于Docker搭建的GitLab CE的備份恢復(fù)