用复制粘贴的方式快速学习GraphQL，开始使用Apollo Server

8 月 ago
新, 韵
3 minutes

首先

我为想学习 GraphQL 的 JavaScript 初学者准备了一份教程。在这个教程中，我们将使用 Apollo 这个 GraphQL 库。

为了让人们在理解之前先尝试到“移动的感觉”，本教程几乎全部都是复制和粘贴，进程迅速。

不是Apollo，而是先学习Nexus、Hasura等其他服务器端GraphQL技术，我在犹豫不决。GraphQL有客户端和服务器端两种，但在本教程中我们只讲解服务器端。除了Apollo之外，还有其他实现服务器端GraphQL的框架，例如Nexus和Hasura，有些人可能会犹豫不决不知从哪个开始学习。为了让这些朋友们也能受益，我们在教程中进行了一些改进。本教程以及其后续的一系列教程，几乎完全以“复制粘贴”为基础，可以快速地进行学习。即使时间紧张的人，也可以掌握“运行GraphQL”的感觉，这个感觉适用于Apollo、Nexus和Hasura等实现技术无关，适用于GraphQL全局。沿着教程，学习了一定的Apollo Server后，可以选择继续学习Apollo Server，或者将学习的重点转移到Nexus、Hasura等方面。
既经有了Apollo Server的官方文档中的起步指南页面，您只需查阅那个页面即可。确实，单独查阅这份教程，与官方的起步指南并没有太大区别。
然而，通过学习这个教程以及接下来的一系列教程，我们经过了许多关于复制粘贴的技巧积累，可以让您更快速、轻松地学习。
其他起步指南页面的区别有：

基于TypeScript语言
使用TypeScript的实时编译器ts-node-dev，并作为后续教程顺利进行的基础
没有过多地进行详细解释，而是先让您在动手实践中体会，达到感知原理的目的

一旦通过学习这一系列教程，您能掌握GraphQL的运行感觉，推荐您随后再通过Apollo官方教程进行复习学习。与直接从Apollo官方教程开始学习相比，这种方式更快，因为我们在教程结构上进行了改进。

将 Git 仓库克隆下来

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

git clone https://github.com/richardimaoka/tutorial-apollo-server-getting-started.git
cd tutorial-apollo-server-getting-started

稍后会启动另一个终端，这个终端我们称之为“主终端”。

TypeScript环境的安装配置

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

npm init -yes

结果: 会生成 package.json 文件

请执行以下命令。

npm install typescript

行动：请键入以下命令。

npx tsc -init

结果：将生成文件 tsconfig.json。

现在我们已经搭建好了TypeScript的编译环境。接下来，我们通过以下几个步骤来运行一段简单的TypeScript代码。

请执行以下命令。

cp answers/index0.ts index.ts

结果：复制的文件如下所示。

export const s: string = "hello world";
console.log(s);

我們將引入名為 ts-node-dev 的工具，以監聽 TypeScript 並執行它。

请执行以下一系列的命令。

npm install ts-node-dev
npm set-script start "ts-node-dev --respawn index.ts"

结果：以下内容将被插入到package.json中。

  "scripts": {
    "start": "ts-node-dev --respawn index.ts"
  }

行动：打开另一个终端，并输入以下命令。

npm run start

回答：结果：将会显示出以下的“你好世界”。

> start
> ts-node-dev --respawn index.ts

[INFO] 14:12:04 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)
hello world

让我们修改index.ts文件的内容，通过观察功能可以实时在终端上确认其反映。

动作：请在主终端中输入以下命令。

cp answers/index1.ts index.ts

结果：文件已被修改如下。

-export const s: string = "hello world";
+export const s: string = "good morning world";
 console.log(s);

结果：在运行npm run start的ts-node-dev终端中，hello world的显示会被修改为good morning world。

[INFO] 14:15:33 Restarting: /workspaces/apollo-server-tutorial/index.ts has been modified
good morning world

到目前为止，我们已经成功地实现了对简单的TypeScript代码的监听和执行。当我们修改代码时，ts-node-dev的监听功能将会立即重新启动服务器，使得在Apollo Server上进行开发变得更加舒适和便捷。

Apollo Server的安装和执行

请在等待输入的主终端中输入以下命令。

npm install apollo-server graphql

请在运行ts-node-dev的终端中，按下Ctrl+C后重新启动ts-node-dev。

npm run start

动作：请在主要终端中输入以下命令。

cp answers/index2.ts index.ts

结果：已将最少量的Apollo Server代码复制到index.ts中。

结果：在ts-node-dev终端上，会显示如下信息。

[INFO] 14:30:40 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)
?  Server ready at http://localhost:4000/

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

结果：将显示如下屏幕。

image.png

这是一个名为The Apollo Studio Explorer的工具，可以通过浏览器访问GraphQL服务器。

Apollo Studio Explorer是一个功能强大的Web IDE，用于创建、运行和管理GraphQL操作。

请点击屏幕上的“Query your server”按钮。

结果：会转到如下所示的界面。

2022-01-25_00h35_02.png

操作：在”Operation”的部分输入以下内容，并在花括号{}中按下空格键。自动补全将提供候选项。

image.png

行动：请从候补人选中选择“你好”，然后点击“运行”。

2022-01-25_00h36_07.png

结果：在”Response”部分将显示来自服务器的响应”hello world”。

2022-01-25_00h36_15.png

Apollo Studio Explorer是在Apollo开发中必不可少的工具。在下一章中，我们将详细介绍GraphQL类型以及Apollo Studio Explorer的基本用法。

为什么在没有写实现的情况下，会自动返回字符串”Hello World”？index.ts
通过在ApolloServer中传递mocks: true，即使没有编写Resolver的实现，也会返回String类型的mock值”hello world”。
关于mock的含义，请参阅下面的「在Apollo Server中尝试使用一些类型」，可以更明确地了解。如何在不使用mock的情况下编写Resolver并开发实用的GraphQL服务器的方法将在下一个教程中解释。

我不想用Apollo Studio Explorer，我想使用GraphQL Playground或者GraphiQL，你觉得呢？
当GraphQL出现时，在浏览器中调用GraphQL服务器的方法就是使用GraphiQL。
在GraphQL出现一段时间后，Apollo开始默认使用GraphQL Playground，而不是GraphiQL，直到Apollo Server 3.0才开始默认使用Apollo Studio Explorer。
然后，根据以下公告，GraphQL Playground将被废弃，计划推出2.0版本…宣布：Playground?GraphiQL，废弃Playground-GitHub graphql/graphql-playground issue＃1143

…但根据上述GitHub问题，看起来从2021年开始，可能又有了一些政策上的变更。
无论如何，Apollo Server现在默认使用Apollo Studio Explorer，所以在这个教程中我们也使用它。

域名不是localhost而是https://studio.apollographql.com，但它真的不会自动发送到外部数据吗？
一句话来说，不会发送。
https://www.apollographql.com/docs/studio/explorer/sandbox/Apollo Sandbox是Explorer的特殊实例，不需要Apollo账户。Sandbox不支持某些Explorer功能，如模式历史，但非常适用于本地开发。
…中略…
如果您查询运行在localhost上的图形，可以在没有互联网连接的情况下使用Sandbox。要这样做，请在连接到互联网时至少打开一次Sandbox在浏览器中。然后，您可以使用该浏览器在离线状态下打开Sandbox。

然而，尽管官方文档中如此描述，但域名是https://studio.apollographql.com而不是本地地址，这确实有点令人不舒服。

尝试使用Apollo Server来应用一些类型

行动：请在主终端输入以下命令。

cp answers/index3.ts index.ts

结果：添加了一些类型。

const typeDefs = gql`
  type Query {
    hello: String
>   booleanValue: Boolean
>   intValue: Int
>   floatValue: Float
  }
 `;

请打开浏览器，并访问 http://localhost:4000/

2022-01-26_23h46_24.png

结果：用与先前相同的步骤，现在应该会出现除了hello之外的新选项，其中包括booleanValue、floatValue和intValue。

动作：将以下查询输入到“操作”部分，并点击“运行”按钮。

{
  hello
  booleanValue
  floatValue
  intValue
}

结果是这样返回的。

2022-01-26_23h49_43.png

请执行以下命令。

cp answers/index4.ts index.ts

请在查询中添加arrayOfInts。

2022-01-26_23h50_50.png

结果：将返回这样的结果。

2022-01-26_23h51_24.png

Apollo Server的模拟功能会自动生成一个数组元素数为2的数组。

请执行以下命令。

cp answers/index5.ts index.ts

请使用arrayOfObjs作为输入参数进行查询。

2022-01-26_23h54_59.png

结果：会返回此类错误。

2022-01-26_23h59_09.png

为什么会发生这个错误呢？因为在GraphQL的查询语法中，对于对象类型的字段，必须编写类似以下的嵌套查询。

行动：请将以下查询重写。

{
  arrayOfObjs {
    id
    intValue
    floatValue
  }
}

请点击“运行”按钮。

2022-01-26_23h51_24.png

结果：将返回这样的结果。

2022-01-27_00h02_08.png

总结

我介绍了如何启动 Apollo Server，并从浏览器执行简单查询的步骤。

这次是以最小的服务器实现为例，指定了mocks: true，如下所示。

const server = new ApolloServer({ typeDefs, mocks: true });

在实际的 GraphQL 服务器开发中，不使用模拟数据时，需要编写每个字段的解析器（Resolver）。下面的教程将介绍如何编写解析器。

下一个教程

 

参考资料的唯一选项。

Can you please provide the original sentence in English, so that I can accurately paraphrase it in Chinese?

    • Apollo Basics 公式 https://www.apollographql.com/docs/

Apollo Server 公式 https://www.apollographql.com/docs/apollo-server/

GraphQL 公式 https://graphql.org/

How to GraphQL https://www.howtographql.com/