三个出色的 GraphQL 开发者体验工具

我真正喜欢 GraphQL 和 Apollo Client 的地方在于它们为我作为一名前端工程师提供的开发体验。在本文中，我们将介绍一些让你的日常工作更轻松的实用工具！

请注意，本文假设您已经具有 GraphQL 的一些经验

GraphQL 浏览器/游乐场

通常，当我们开始使用新的 API 时，我们做的第一件事就是阅读 API 文档。在传统的 REST API 时代，如果每个端点都有描述性文档，我就很开心了，所以像Swagger这样的东西真是个福音。GraphQL 方面进展如何？

如您所见，与 REST 相比，GraphQL 部分的记录非常简短……但那里有一个指向游乐场的链接！

那么，这是什么？基本上，它是一个游乐场，你可以在其中运行 GraphQL 查询和变更并检查结果。尝试将此查询粘贴到资源管理器的左侧，然后单击Run按钮：

query Characters {
  characters {
    results {
      id
      name
    }
  }
}

如果您对这个特定的 GraphQL 端点的其他查询感到好奇，请随时点击Docs右侧的选项卡！在那里，您可以找到有关查询所需的参数、可以指定在响应中包含的字段等所有信息。

此外，如果您尝试编写不同的查询，您会注意到游乐场还具有 linting 和自动完成功能：

这些截图中展示的 Playground 是Prisma Playground。另一个流行的选择是GraphiQL —— 例如，我们在 GitLab 中使用它作为我们的GraphQL Explorer

使用 IDE 插件进行 Linting 和自动完成

拥有一个功能齐全的 Playground 固然很好，但我们仍然需要在 IDE/编辑器中编写代码。有什么工具可以帮助我们做到这一点吗？让我们来看看两个流行的 IDE：VS Code 和 WebStorm，看看它们是如何与 GraphQL 协同工作的。

VS 代码

如果你选择的 IDE 是 VS Code，你可能会对Apollo 的Apollo GraphQL 扩展感兴趣。它提供了很多优点：语法高亮、linting、自动完成、导航到 fragments 等等。

安装插件后，您需要对其进行正确的配置。为此，请在项目根目录中创建一个文件。项目通过此文件中的apollo.config.js顶级键进行配置：client

// apollo.config.js

module.exports = {
  client: { ... },
};

现在我们需要为插件提供一个模式。对于 Rick and Morty API，我们需要处理远程service模式，因此需要在属性中设置正确的模式 URL client：

// apollo.config.js

module.exports = {
  client: {
    service: {
      name: 'Rick and Morty',
      url: 'https://rickandmortyapi.com/graphql',
    },
  },
};

我们可以检查一下它在 linting 和自动补全方面的表现。我们创建一个 JS 文件，并使用以下命令编写查询：graphql-tag

import gql from 'graphql-tag';

const charactersQuery = gql`
  query CharactersQuery {
    characters {
      results {
        id
        name
      }
    }
  }
`;

当我们开始添加新字段时，我们可以看到自动完成的工作原理：

此外，如果我们添加一个不存在的字段，它将被突出显示为错误：

相同的功能适用于文件夹下的.graphql或文件。如果您想包含文件夹外的文件，则需要正确设置客户端.gql/src

如果您想在本地定义一些 GraphQL 类型以用于 Apollo 状态管理，插件将自动将本地模式与远程模式拼接起来 - 这样您的本地查询和变异将得到正确验证！

WebStorm

对于 WebStorm IDE，我们可以使用Jim Kynde Meyer 开发的JS GraphQL插件。安装完成后，我们需要通过定义 GraphQL 模式的路径来配置它。具体操作如下：右键单击项目根文件夹，然后选择New-> GraphQL Configuration File。

这将导致.graphqlconfig在项目根目录中创建一个包含以下内容的文件

// .graphqlconfig
{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:8080/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

让我们为模式命名，例如"Remote Rick-n-Morty Schema"。pathName选项将定义存储模式的文件名称，我们不会更改它。对于 Rick and Morty API，我们需要从端点下载模式。对于Default GraphQL endpoint，我们将链接从更改localhost为https://rickandmortyapi.com/graphql。我们不需要此端点的任何标头，因此我们可以安全地删除此部分。

另外，每次打开项目时更新本地 GraphQL 模式就更好了！为了实现这一点，我们将其设置introspect为true。

现在你的配置文件应该看起来像这样

// .graphqlconfig

{
  "name": "Remote Rick-n-Morty Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "https://rickandmortyapi.com/graphql",
        "introspect": true
      }
    }
  }
}

点击GraphQLIDE 底部的选项卡。您将看到有关我们的 GraphQL 架构的信息……但到目前为止，该架构还是空的！

双击Default GraphQL Endpoint并选择Get GraphQL Schema from Endpoint (introspection)。

现在，获取到 schema 之后，我们可以检查一下它的 linting 和自动补全功能。我们创建一个 JS 文件，并使用以下命令编写查询：graphql-tag

import gql from 'graphql-tag';

const charactersQuery = gql`
  query CharactersQuery {
    characters {
      results {
        id
        name
      }
    }
  }
`;

如果我们尝试向查询添加新字段，插件将为我们提供建议列表：

如果我们输入错误，错误将会被高亮显示：

这些功能也适用于.graphql文件。遗憾的是，该插件无法.gql像 VS Code 插件那样识别带有扩展名的文件。此外，与 VS Code 插件不同，Webstorm One 不会将本地 GraphQL 模式与远程模式拼接起来。

Apollo 开发者工具

我们刚刚学习了如何在处理 API 端点本身以及在编辑器中编写 GraphQL 相关代码时提升开发者体验。那么如何在浏览器中调试 GraphQL API 交互呢？

如果您使用Apollo Client作为您的 GraphQL 客户端，您将能够利用其适用于 Chrome 或 Firefox 浏览器的出色Apollo DevTools扩展。

您可以使用这个扩展程序做什么？让我们看一下它在浏览器中的外观：

GraphQLtab：这实际上是一个本地的 GraphQL 游乐场，类似于我们在文章第一部分中描述的。您可以在这里阅读架构文档，编写和运行查询，就像在 Prisma 或 GraphiQL 上一样：

Queries：在这里您可以看到您的应用程序此时调用的所有查询，检查它们并在必要时在操场上运行它们

Mutations：与上一个选项卡相同，但针对的是 GraphQL 突变
Cache：在我看来，这个是最有用的。在这里，你可以随时检查 Apollo 客户端缓存中当前所有查询和变更的结果。当我在变更中遇到复杂的更新逻辑，并且完全不知道它们如何影响我的缓存时，它真的救了我一命。

希望以上提到的工具能让你使用 GraphQL 时更加轻松！如有任何疑问，请在评论区留言。

鏂囩珷鏉ユ簮锛�https://dev.to/n_tepluhina/ Three-awesome-tools-for-graphql-developer-experience-28e7