用复制粘贴的方式快速学习GraphQL,开始使用Apollo Server
首先
我为想学习 GraphQL 的 JavaScript 初学者准备了一份教程。在这个教程中,我们将使用 Apollo 这个 GraphQL 库。
为了让人们在理解之前先尝试到“移动的感觉”,本教程几乎全部都是复制和粘贴,进程迅速。
然而,通过学习这个教程以及接下来的一系列教程,我们经过了许多关于复制粘贴的技巧积累,可以让您更快速、轻松地学习。
其他起步指南页面的区别有:
基于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](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/52-0.png)
这是一个名为The Apollo Studio Explorer的工具,可以通过浏览器访问GraphQL服务器。
Apollo Studio Explorer是一个功能强大的Web IDE,用于创建、运行和管理GraphQL操作。
请点击屏幕上的“Query your server”按钮。
结果:会转到如下所示的界面。
![2022-01-25_00h35_02.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/57-0.png)
操作:在”Operation”的部分输入以下内容,并在花括号{}中按下空格键。自动补全将提供候选项。
![image.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/59-0.png)
行动:请从候补人选中选择“你好”,然后点击“运行”。
![2022-01-25_00h36_07.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/61-0.png)
结果:在”Response”部分将显示来自服务器的响应”hello world”。
![2022-01-25_00h36_15.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/63-0.png)
Apollo Studio Explorer是在Apollo开发中必不可少的工具。在下一章中,我们将详细介绍GraphQL类型以及Apollo Studio Explorer的基本用法。
通过在ApolloServer中传递mocks: true,即使没有编写Resolver的实现,也会返回String类型的mock值”hello world”。
关于mock的含义,请参阅下面的「在Apollo Server中尝试使用一些类型」,可以更明确地了解。如何在不使用mock的情况下编写Resolver并开发实用的GraphQL服务器的方法将在下一个教程中解释。
当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,所以在这个教程中我们也使用它。
一句话来说,不会发送。
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](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/74-0.png)
结果:用与先前相同的步骤,现在应该会出现除了hello之外的新选项,其中包括booleanValue、floatValue和intValue。
动作:将以下查询输入到“操作”部分,并点击“运行”按钮。
{
hello
booleanValue
floatValue
intValue
}
结果是这样返回的。
![2022-01-26_23h49_43.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/79-0.png)
请执行以下命令。
cp answers/index4.ts index.ts
请在查询中添加arrayOfInts。
![2022-01-26_23h50_50.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/83-0.png)
结果:将返回这样的结果。
![2022-01-26_23h51_24.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/85-0.png)
Apollo Server的模拟功能会自动生成一个数组元素数为2的数组。
请执行以下命令。
cp answers/index5.ts index.ts
请使用arrayOfObjs作为输入参数进行查询。
![2022-01-26_23h54_59.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/90-0.png)
结果:会返回此类错误。
![2022-01-26_23h59_09.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/92-0.png)
为什么会发生这个错误呢?因为在GraphQL的查询语法中,对于对象类型的字段,必须编写类似以下的嵌套查询。
行动:请将以下查询重写。
{
arrayOfObjs {
id
intValue
floatValue
}
}
请点击“运行”按钮。
![2022-01-26_23h51_24.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/97-0.png)
结果:将返回这样的结果。
![2022-01-27_00h02_08.png](https://cdn.silicloud.com/blog-img/blog/img/657d8277913a08637a6b0681/99-0.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/