Apollo for VS Code 扩展

The ApolloVS Code 扩展提供使用 Apollo 开发应用程序的全工具包体验。

该扩展可以使您

• 为 语法高亮对 GraphQL 文件和 gql 模板中的 JavaScript 文件
• 在编写查询时获得即时反馈和 智能自动完成对 字段、 参数、类型和 变量
• 在客户端模式和远程模式中管理模式
• 在 性能信息 中查看您的 查询 定义
• 验证字段和参数在操作中
• 更轻松地导航项目使用跳转和预览定义
• 管理客户端模式
• 切换图变体以与在不同环境中运行的模式一起工作

入门指南

要获得 VS Code 体验的全部好处，最好在安装扩展之前将正在开发的模式与扩展链接起来。这样做最好的方法是发布一个模式到 Apollo 模式数据库。完成此操作后：

1. 在项目的根目录下创建一个apollo.config.js文件。
2. 从GraphOS Studio获取一个个人 API 密钥。

设置 Apollo 配置

为了使 VS Code 插件知道如何查找模式，它需要与已发布的模式或本地模式之一相链接。要将项目链接到已发布的模式，请编辑apollo.config.js文件以使其看起来像这样：

1
module.exports = {
2
  client: {
3
    service: 'my-graphql-app'
4
  }
5
};

这里的service名称是图在GraphOS Studio中创建的

设置.env文件

要使用 GraphOS Studio 认证以拉取您的模式，请在与apollo.config.js文件相同的目录中创建一个.env文件。这应该是一个未跟踪的文件（即，不要将其提交到 Git）。

然后进入您的 用户设置页面 在 GraphOS Studio 中创建一个新的 个人 API 密钥。

找到密钥后，将以下行添加到 .env 文件中：

APOLLO_KEY=<enter copied key here>

完成后，可以重新加载 VS Code，Apollo 集成将连接到 GraphOS Studio 以提供自动完成、验证等功能。

本地模式

有时，将编辑器链接到本地运行的 schema 版本以尝试正在进行中的新设计可能是有意义的。为此，可以将 apollo.config.js 文件链接到本地服务定义：

1
module.exports = {
2
  client: {
3
    service: {
4
      name: 'my-graphql-app',
5
      url: 'https://127.0.0.1:4000/graphql'
6
    }
7
  }
8
};

链接到本地模式不会提供所有功能，例如切换 graph 变体 和性能指标。有关配置选项的详细信息，请参阅 Apollo 配置文档。

仅客户端模式

VS Code 扩展的其中一个最佳特性是在与 Apollo Client 集成状态管理时，自动合并远程模式和本地模式。这会在客户端项目中发现模式定义时自动发生。默认情况下，VS Code 扩展将在 ./src 目录下查找所有文件，以找到 operations 和模式定义，构建应用程序的完整模式。

客户端模式定义可以分布在整个客户端应用程序项目中，并将合并在一起以创建单个模式。可以通过向 apollo.config.js 添加指定来控制默认行为：

1
module.exports = {
2
  client: {
3
    service: 'my-graphql-app',
4
    includes: ['./src/**/*.js'],
5
    excludes: ['**/__tests__/**']
6
  }
7
};

获取扩展

设置完配置并发布模式后，安装 Apollo GraphQL 扩展，然后尝试打开包含 GraphQL 操作的文件。

打开文件时，点击状态栏图标将打开输出窗口并打印与文件关联的项目统计信息。这对于确认项目配置正确很有帮助。

功能

Apollo for VS Code 为 GraphQL 项目带来了许多有助于工作的功能。

智能自动补全

配置后，编辑器将完全了解客户端正在运行的 operations 对应的架构，包括仅客户端架构（例如本地状态 mutations）。因此，编辑器具有在您键入时自动补全 fields 和 arguments 的能力。

行内错误和警告

编辑器可以使用本地或已发布的架构在运行操作之前对其进行验证。语法错误、无效的 fields 或 arguments，以及已弃用的字段立即在您的编辑器中显示为错误或警告，确保所有开发人员都在使用最新版本的生成模式。

行内字段类型信息

由于 GraphQL 强类型架构的特点，编辑器不仅了解哪些 fields 和 arguments 是有效的，而且还知道期望的类型。在有效 GraphQL operation 中的任何类型上悬停，可以看到该字段返回的类型以及它是否可以空。

性能洞察

GraphQL 的灵活性可能使得预测操作的成本变得困难。如果没有洞察到一个操作的成本，开发人员可能会意外地编写使他们的图 API 基底层后端承受压力的查询。感谢 Apollo 平台与 VS Code 的集成以及我们的追踪存储库，团队可以通过立即在他们的编辑器中看到查询的成本来完全避免这些问题。

当连接到在GraphOS Studio中报告了指标的服务时，VS Code扩展将显示内联性能诊断。在输入操作时，任何响应时间超过1毫秒的字段将被注解在字段右侧！这给团队成员提供了一个图景，了解随着更多字段被添加到操作或片段，操作将花费多长时间。

语法高亮

Apollo编辑器扩展为所有GraphQL相关内容提供语法高亮，包括.code-1lvdtfu>.graphql.graphql文件中的模式定义，TypeScript中的复杂查询，甚至是客户端仅扩展模式的语法高亮。在.Graphql、.gql、.js和.ts文件类型上，GraphQL的语法高亮是默认启用的。

导航项目

在大型代码库中导航可能很困难，但Apollo GraphQL扩展使得这一过程更加容易。在操作或模式中的任何字段上右键单击，您就可以跳转到（或窥视）定义，以及找到项目中该字段的任何其他引用。

图形变体切换

Apollo支持发布多个版本的方案。这对于在将来的开发方案上开发并准备客户符合该方案非常有用。要切换图形变体，请打开命令 Palette（mac上为cmd + shift + p），搜索“Apollo”，然后选择“Apollo：选择方案标签”选项。

故障排除

最常见的错误是配置错误，如缺少.code-1lvdtfu>.env.env文件或.code-1lvdtfu>apollo.config.js文件中服务信息不正确。请参阅.Apollo配置文档以获取更多配置指导。

其他错误可能是由发布的方案的旧版本引起。要重新加载方案，请打开命令 Palette（mac上为cmd + shift + p），搜索“Apollo”，然后选择“Apollo：重新加载方案”选项。

有时错误将显示在编辑器底部的一个通知中。其他不太重要的消息可能会显示在编辑器的输出面板中。要打开输出面板并获得有关扩展和当前加载数据的诊断信息（如果在与客户端项目一起工作），只需点击状态栏底部的“Apollo GraphQL”图标。

如果问题持续存在或错误消息没有帮助，可以在.apollo-tooling仓库中打开.