快速学习 GraphQL 的拷贝粘贴：示例「员工记录和部门列表页」

2 年 ago

科, 颖

2 minutes

首先

为了想学习GraphQL的JavaScript初学者准备了一个教程。在理解之前，我们提供了一个非常快速的教程，几乎所有的内容只需复制和粘贴，让您先体验一下“运行的感觉”。

这次的主题是部门一览页面，以企业员工目录为灵感设计。

虽然称为员工名录，但是并没有显示每个员工个人的信息部分，这些将在后续的不同教程中进行创建。

过去的内容 de

コピペで素早く学ぶ GraphQL: サンプル「自己紹介ページ」

预先准备

请确认已安装了node和npm。

克隆 git 存储库

请在终端上执行以下命令。

git clone https://github.com/richardimaoka/tutorial-apollo-employee-division.git
cd tutorial-apollo-employee-division

1. 设置GraphQL服务器

在本教程中，我们将像下面的图片一样，同时启动四个进程（上方）和一个终端（下方）。虽然总数是五个，看起来有些多，但是使用起来很简单，不用担心。

首先让我们来设置GraphQL服务器。

请输入以下命令。

git apply patches/201ea30.patch
git apply patches/f482a1d.patch
git apply patches/b979ec5.patch
git apply patches/425a387.patch
git apply patches/5847c01.patch
git apply patches/ac56d80.patch
cd server
npm install
npm run server-start

请在浏览器中打开 http://localhost:4000/。

结果：将显示如下所示的 Apollo Studio Explorer 页面。

请点击“查询服务器”按钮。

结果：将转到以下屏幕。

请在 Apollo Studio Explorer 中输入以下查询并点击运行。

{
  hello
}

结果：你可以从GraphQL服务器获取以下响应。

我已确认GraphQ服务器已经正常运行。

请保持这个流程的运行状态。

2. 在服务器端引入GraphQL代码生成。

通过 codegen 可以自动从 GraphQL 的 schema.graphql 文件中生成 TypeScript 的类型。手动编写类型不仅麻烦而且容易出错，所以让 codegen 自动生成类型吧。

当实际查看自动生成的类型定义时，很容易就能看出它有多么方便。让我们立即开始运行。

请打开一个新终端。

请执行以下命令。

# gitレポジトリのルートディレクトリに移動
cd "$(git rev-parse --show-toplevel)"
git apply patches/88b1ced.patch
git apply patches/1f78fa0.patch
git apply patches/af44310.patch
git apply patches/1de3257.patch
cd server
npm install
npm run server-generate

结果：如果在server/generated/graphql.ts文件中自动生成了类型定义，那就好了。

请将该进程保持开启状态。

3. React 客户端设置

接下来，我们将设置React客户端。

请您打开一个新的终端。

行动：请输入以下命令。

gitレポジトリのルートディレクトリに移動
cd "$(git rev-parse --show-toplevel)"
git apply patches/d569883.patch
git apply patches/6186b50.patch
git apply patches/bca253f.patch
git apply patches/dcd6de3.patch
cd client
npm install
npm run client-start

结果：如果在 http://localhost:3000/ 上显示如下内容，则表示OK。

从这个显示着React标志的屏幕上，我们来将屏幕显示变得简洁。这样一来，以后对源代码的更改会更加清晰明了。

请保持此进程运行。

请打开一个新的终端窗口。

请执行以下命令。

gitレポジトリのルートディレクトリに移動
cd "$(git rev-parse --show-toplevel)"
git apply patches/d2baf20.patch
git apply patches/c5201f0.patch

结果：如果以以下方式显示，则表示OK。

接下来，我们要插入页眉部分。

请执行以下命令。

git apply patches/f2f7d08.patch

结果：如果显示如下，则表示OK。

让我们在App.tsx中尝试引入GraphQL。

请执行以下命令。

git apply patches/a1d6ca9.patch

我们将从这里开始，让客户端也能够使用通过GraphQL自动生成的TypeScript类型定义来进行编码。为此，让我们进行codegen的设置。

4. 客户端codegen设置。

不仅服务器端，客户端也可以使用codegen，通过自动生成的类型定义可以更轻松地避免手写时出现的类型错误。

动作：请打开一个新的终端。

操作：请键入以下命令。

# gitレポジトリのルートディレクトリに移動
cd "$(git rev-parse --show-toplevel)"
git apply patches/6dae1d9.patch
git apply patches/0cdd81d.patch
git apply patches/56bb5dc.patch
git apply patches/db72e9f.patch

由于GraphQL模式只有一个名为hello的字符串字段，这只是一个权宜之计，我们将对其进行更新。

请执行下列指令。

git apply patches/f28d1c1.patch

在这种状态下，如果执行客户端codegen操作，将会发生错误。让我们在下面验证一下。

动作：请输入以下命令。

cd client
npm install
npm run client-codegen 
npm run client-generate

结果：发生错误。

 Found 1 error
#
  ✖ src/generated/graphql.ts
    Error: 
          Unable to find any GraphQL type definitions for the following pointers:
       
              - src/**/*.tsx

请将此过程保持开启状态。

为了解决先前的错误，在客户端上定义第一个GraphQL片段。

动作：请将操作转移到以前打开的另一个终端。

请执行以下命令。

# gitレポジトリのルートディレクトリに移動
cd "$(git rev-parse --show-toplevel)"
git apply patches/29c4cb7.patch

结果：如果在client/generated/graphql.ts文件中自动生成了类型定义，那就可以了。

5. 渐进式开发 shì fā)

好了，终于从这里开始进行React客户端界面的逐步变化，进行增量开发。由于源代码的更改会立即反映在界面的变化中，所以我相信您一定会感到有成就感。

我們將繼續使用之前開啟的四個程序所不同的終端機。

请输入以下命令。

让我们首先显示从GraphQL服务器获取的部门名称。

# gitレポジトリのルートディレクトリに移動
cd "$(git rev-parse --show-toplevel)"
git apply patches/fc58873.patch
git apply patches/fc67eea.patch

结果：如果显示如下，就可以了

接下来，将部门名称显示为日语。

请执行以下命令。

git apply patches/8af8eb9.patch

结果：如果按照以下方式显示，则为正常。

让我们梳理一下DivisionCard的外观。

行动：请输入以下命令。

git apply patches/c40553d.patch

结果：只需要以以下方式显示即可。

让我们显示每个部门中的部署数量和人员数量。我们将在GraphQL中添加字段numDepartments和numMembers。

请键入以下命令。

git apply patches/a806910.patch

结果：如果显示如下内容，则表示正常。

让我们在每个部门的卡片右下角也显示英文部门名。我们将在GraphQL中添加一个名为 divisionDisplayNameEn 的字段。

请执行以下命令。

git apply patches/737806f.patch

结果：如果以下的内容显示出来，就表示OK。

最后，让我们尝试增加显示的部门数量。为此，我们需要增加GraphQL查询的”divisions”字段返回的元素数量。

请执行以下指令。

git apply patches/3f1bc4f.patch

结果：如果显示如下，则表示一切正常

6. 总结

我先前介绍了一个应用程序，它在React客户端和GraphQL服务器之间进行通信来构建一个以企业员工名册为形象的部门列表页面。

下一个教程

(制作中) 设计成类似企业员工名册风格的，部门内的员工列表页面