GraphQL 提供了一种简洁优雅的方式来描述 API，但是对于需要频繁更改的数据模型来说，不方便的是每次更改 Schema 都需要手动修改模型描述文件。为了避免这种繁琐的流程，我们可以通过在线编辑 Schema 的方式来增加开发效率。本文将介绍如何在 GraphQL 中实现在线编辑 Schema。
概述
在线编辑 Schema 意味着在不需要离开浏览器的情况下直接修改 Schema，这使得开发人员能够更快地迭代和调试模型描述。有很多工具可以帮助我们实现在线编辑 Schema，比如 GraphQL Playground 和 Altair。
这些工具可以让我们在浏览器中编辑 Schema 并实时预览结果，而不需要手动更改文件并重启服务器。在本文中，我们将使用 GraphQL Playground 来演示如何实现在线编辑 Schema。
步骤
步骤一：安装依赖项
首先，我们需要安装 graphql-yoga 和 graphql-playground-middleware-express 这两个依赖项。可以使用 npm 或者 yarn 安装这些依赖项：
--- ------- ------------ ------------------------------------- ------
步骤二：初始化 GraphQL 服务器
我们需要初始化一个 GraphQL 服务器并添加 Playground 中间件。在本例中，我们将创建一个名为 index.js 的文件并输出 hello world：
----- ------- - -------------------
----- - ------------- - - ------------------------
----- ----------------- - ---------------------------------------------------------
----- -------- - -
---- ----- -
------ -------
-
--
----- --------- - -
------ -
------ -- -- ------ -------
-
--
----- ------ - --- --------------- --------- --------- ---
-- --- ---------- ----------
--------------------------------- ------------------- --------- ---------- ----
--------------- -- ------------------- -- ------- -- ------------------这将启动一个 GraphQL 服务器，并向 http://localhost:4000 发送 hello world 消息。我们还向 /playground URL 添加了 Playground 中间件。这意味着我们可以在浏览器中访问 http://localhost:4000/playground 并使用 Playground 编辑器编辑模型描述。
步骤三：编辑模型描述
打开 http://localhost:4000/playground，然后切换到 Schema 标签，您将看到一个编辑器。您可以在此编辑器中添加、删除和修改 Schema 中的各个部分。例如，我们可以将 hello 查询更改为接受 name 参数：
---- ----- - ----------- --------- ------- -
在右侧的 Query Variables 标签中添加参数：
- ------- ------ -
现在我们已经修改了我们的 Schema，Playground 模拟了一个接受 name 参数的 hello 请求，并输出消息 "Hello John!"。
步骤四：保存模型描述
在下一次部署服务器时，您需要确保模型描述与您的代码库同步。您可以使用以下命令将模型描述保存到文件中：
--- --- -----------
该命令将在项目根目录中创建一个名为 schema.graphql 的文件。我们可以使用此文件在代码库中存储模型描述。
步骤五：从文件加载模型描述
在运行服务器时，我们还需要从文件加载模型描述。在 index.js 文件中，我们可以使用 fs 模块读取 schema.graphql 文件：
----- -- - -------------- ----- -------- - ----------------------------------- - --------- ------- ---
注意，这将导致代码中的模型描述与 Playground 编辑器中的模型描述不同步。
结论
通过在浏览器中在线编辑 Schema，我们可以更快地迭代和调试模型描述，从而提高开发效率。在本文中，我们使用 GraphQL Playground 演示了如何实现在线编辑 Schema。由于这种方式可能导致与代码库中的 Schema 不同步，因此我们还介绍了如何从文件加载模型描述。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722d9a12e7021665e0d2a2d