如何在 GraphQL 中实现在线编辑 Schema？-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 提供了一种简洁优雅的方式来描述 API，但是对于需要频繁更改的数据模型来说，不方便的是每次更改 Schema 都需要手动修改模型描述文件。为了避免这种繁琐的流程，我们可以通过在线编辑 Schema 的方式来增加开发效率。本文将介绍如何在 GraphQL 中实现在线编辑 Schema。

概述

在线编辑 Schema 意味着在不需要离开浏览器的情况下直接修改 Schema，这使得开发人员能够更快地迭代和调试模型描述。有很多工具可以帮助我们实现在线编辑 Schema，比如 GraphQL Playground 和 Altair。

这些工具可以让我们在浏览器中编辑 Schema 并实时预览结果，而不需要手动更改文件并重启服务器。在本文中，我们将使用 GraphQL Playground 来演示如何实现在线编辑 Schema。

步骤

步骤一：安装依赖项

首先，我们需要安装 graphql-yoga 和 graphql-playground-middleware-express 这两个依赖项。可以使用 npm 或者 yarn 安装这些依赖项：

npm install graphql-yoga graphql-playground-middleware-express --save

步骤二：初始化 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 参数：

type Query {
  hello(name: String!): String!
}

在右侧的 Query Variables 标签中添加参数：

{
  "name": "John"
}

现在我们已经修改了我们的 Schema，Playground 模拟了一个接受 name 参数的 hello 请求，并输出消息 "Hello John!"。

步骤四：保存模型描述

在下一次部署服务器时，您需要确保模型描述与您的代码库同步。您可以使用以下命令将模型描述保存到文件中：

npm run save-schema

该命令将在项目根目录中创建一个名为 schema.graphql 的文件。我们可以使用此文件在代码库中存储模型描述。

步骤五：从文件加载模型描述

在运行服务器时，我们还需要从文件加载模型描述。在 index.js 文件中，我们可以使用 fs 模块读取 schema.graphql 文件：

const fs = require('fs');
const typeDefs = fs.readFileSync('./schema.graphql', { encoding: 'utf-8' });

注意，这将导致代码中的模型描述与 Playground 编辑器中的模型描述不同步。

结论

通过在浏览器中在线编辑 Schema，我们可以更快地迭代和调试模型描述，从而提高开发效率。在本文中，我们使用 GraphQL Playground 演示了如何实现在线编辑 Schema。由于这种方式可能导致与代码库中的 Schema 不同步，因此我们还介绍了如何从文件加载模型描述。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6722d9a12e7021665e0d2a2d