VS Code Extension Usage

Configure Apollo's VS Code Extension to validate Apollo Connectors

Starting with version 2.3.3, the Apollo GraphQL VS Code extension can give you fast feedback on your connectors in VS Code. Through it, you can get the same validations that composition provides, with errors and hints highlighted in your schema file on each save.

Prerequisites

These composition-based diagnostics are powered by Rover, starting with version 0.27.0-preview.0. You'll need this version or later installed to use composition-based diagnostics.

caution
Installing the latest version of Rover will not give you the pre-release version 0.27.0-preview.0. You need to specify this exact version until 0.27.0 is released.

Configuration

There are two required files to enable connectors validations in VS Code:

  1. An apollo.config.yaml file in the root of your project containing rover: {}

  2. A supergraph.yaml file also in the root of your project, which is the configuration file used for rover dev, rover supergraph compose, and this VS Code extension.

    1. Make sure to set the composition version to 2.10.0-preview.3.

    2. Make sure every file you want feedback on is included in the subgraphs section.

tip
You can use a different location for your supergraph.yaml by setting the rover.supergraphConfig option in apollo.config.yaml, like this:
YAML
apollo.config.yaml
1rover:
2  supergraphConfig: path/to/supergraph.yaml

Troubleshooting

Refer to the VS Code Extension article for information beyond the troubleshooting tips below.

Reloading the extension

If you aren't seeing diagnostics, try reloading the extension by running the Apollo: Reload schema command from the command palette.

Turn on autosave

Most diagnostics will only appear when you save your schema file. If you enable autosave in VS Code, you'll see feedback each time you pause typing.

Double-check your Rover version

Run rover --version in a terminal to ensure you have version 0.27.0-preview.0 or later. You can also specify a path to a specific Rover binary in your apollo.config.yaml file:

YAML
apollo.config.yaml
1rover:
2  bin: /path/to/rover

Debug logging

If the extension isn't working as expected, you can set the apollographql.trace.server setting to verbose in your VS Code settings. This settings adds detailed logs to the output panel of the extension, which can aid in debugging.
Feedback

Forums