开始使用Apollo Graphql服务器
本教程可帮助您:
- 获得对 GraphQL 原理的基本理解
- 定义一个表示数据集结构的 GraphQL 模式
- 运行 Apollo Server 实例,该实例允许您针对架构执行查询
本教程假定您熟悉命令行和 JavaScript,并且您安装了最新版本的 Node.js (12+)。
本教程将引导您完成阿波罗服务器的安装和配置。如果您刚刚开始使用 GraphQL 或 Apollo 平台,我们建议您先完成全栈教程。
步骤 1:创建新项目
-
从您首选的开发目录中,为新项目创建一个目录并进入其中:
cd
1 2
mkdir graphql-server-example cd graphql-server-example
-
使用(或您喜欢的其他包管理器,例如 Yarn)初始化新的 Node.js 项目:
npm
1
npm init --yes
您的项目目录现在包含一个文件。package.json
步骤 2:安装依赖项
运行 Apollo Server 的应用程序需要两个顶级依赖项:
apollo-server
是 Apollo Server 本身的核心库,它可以帮助您定义数据的形状以及如何获取数据。graphql
是用于构建 GraphQL 模式并对其执行查询的库。
运行以下命令以安装这两个依赖项,并将它们保存在项目的目录中:node_modules
|
|
同时在项目的根目录中创建一个空文件:index.js
|
|
为简单起见,将包含此示例应用程序的所有代码。index.js
步骤 3:定义您的 GraphQL 模式
每个 GraphQL 服务器(包括 Apollo Server)都使用一个模式来定义客户端可以查询的数据结构。在此示例中,我们将创建一个服务器,用于按标题和作者查询一组图书。
在您的首选编辑器中打开,然后将以下内容粘贴到其中:index.js
索引.js
|
|
此代码段定义了一个简单、有效的 GraphQL 模式。客户端将能够执行名为 的查询,我们的服务器将返回一个包含零个或多个 s 的数组。books``Book
第 4 步:定义数据集
现在我们已经定义了*数据的结构,*我们可以定义数据本身。Apollo Server 可以从您连接到的任何源(包括数据库、REST API、静态对象存储服务,甚至是另一个 GraphQL 服务器)获取数据。出于本教程的目的,我们将只对一些示例数据进行硬编码。
在 的底部添加以下内容:index.js
索引.js
|
|
此代码段定义了客户端可以查询的简单数据集。请注意,数组中的两个对象都与我们在架构中定义的类型的结构匹配。Book
步骤 5:定义冲突解决程序
我们已经定义了我们的数据集,但 Apollo Server 不知道它在执行查询时应该使用该数据集。为了解决此问题,我们创建了一个解析程序。
解析器告诉 Apollo Server 如何获取与特定类型关联的数据。由于我们的数组是硬编码的,因此相应的解析器非常简单。Book
在 的底部添加以下内容:index.js
索引.js
|
|
步骤 6:创建 ApolloServer
的实例
我们已经定义了架构、数据集和解析程序。现在,我们只需要在初始化 Apollo Server 时向它提供此信息。
在 的底部添加以下内容:index.js
索引.js
|
|
步骤 7:启动服务器
我们已准备好启动我们的服务器!从项目的根目录运行以下命令:
|
|
您应看到以下输出:
|
|
我们已启动并运行!
步骤 8:执行第一个查询
现在,我们可以在服务器上执行 GraphQL 查询。要执行第一个查询,我们可以使用 Apollo Sandbox。
在浏览器中访问。此时将显示 Apollo Server 的默认登录页面:http://localhost:4000
单击“查询您的服务器”以打开沙盒。
您还可以:
- 选择**“下次自动重定向到工作室**”,前提是您希望在每次访问时自动打开沙盒
localhost:4000
- 直接在 studio.apollographql.com/sandbox 打开沙盒
沙盒 UI 包括:
- 用于编写和执行查询的操作面板(中间)
- 用于查看查询结果的响应面板(右侧)
- 用于架构浏览、搜索和设置的选项卡(左侧)
- 用于连接到其他 GraphQL 服务器的 URL 栏(左上角)
我们的服务器支持名为 的单个查询。让我们来执行它!books
下面是用于执行查询的 GraphQL 查询字符串:books
|
|
将此字符串粘贴到“操作”面板中,然后单击右上角的蓝色按钮。结果(来自我们的硬编码数据集)显示在响应面板中:
注意:如果将服务器部署到设置为 的环境,则默认情况下禁用自省。这会阻止 Apollo Sandbox 正常工作。要启用自省,请在 ApolloServer 构造函数
的选项中设置。NODE_ENV``production``introspection: true
GraphQL 最重要的概念之一是,客户端可以选择仅查询他们需要的字段。从查询字符串中删除,然后再次执行。响应将更新为仅包含每本书的字段!author``title
组合示例
您可以在 CodeSandbox 上查看和分叉这个完整的示例:
今后的步骤
此示例应用程序是使用 Apollo Server 的良好起点。请查看以下资源,了解有关架构、解析程序和部署的基础知识的详细信息:
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/graphql/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8Apollo-Graphql%E6%9C%8D%E5%8A%A1%E5%99%A8/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com