Apollo extension for VS Code

The Apollo VS Code extension provides an all-in-one tooling experience for developing apps with Apollo.

The extension enables you to:

• Add syntax highlighting for GraphQL files and gql templates inside JavaScript files.
• Get instant feedback and intelligent autocomplete for fields, arguments, types, and variables as you write queries
• Manage client-side schema alongside remote schema
• See performance information in line with your query definitions
• Validate field and argument usage in operations
• Navigate projects more easily with jump-to and peek-at definitions
• Manage client-only schemas
• Switch schema tags to work with schemas running on different environments

Getting started

To get all of the benefits of the VS Code experience, it's best to link the schema that is being developed against before installing the extension. The best way to do that is by publishing a schema to the Apollo schema registry. Once that is done, two steps are needed:

1. Create an apollo.config.js at the root of the project
2. Copy an API key from the Graph Manager dashboard of the published service

Setting up an Apollo config

In order for the VS Code plugin to know how to find the schema, it needs to be linked to either a published schema or a local one. To link a project to a published schema, edit the apollo.config.js file to look like this:

module.exports = {
  client: {
    service: 'my-graphql-app'
  }
};

The service name here is the ID of the graph you've created in Apollo Graph Manager.

Setting up an API key

To authenticate with Graph Manager to pull down the schema, create a file next to the apollo.config.js called .env. Go to the settings page of your graph in Graph Manager to grab your API key.

Note: It is best practice to create a new API key for each member of the team and name the key so it's easy to find and revoke if needed. This will be easier to manage in the future.

After the key is found, add the following line to the .env file:

ENGINE_API_KEY=<enter copied key here>

After this is done, VS Code can be reloaded and the Apollo integration will connect to Graph Manager to provide autocomplete, validation, and more.

Local schemas

Sometimes it may make sense to link the editor to a locally running version of a schema to try out new designs that are in active development. To do this, the apollo.config.js file can be linked to a local service definition:

module.exports = {
  client: {
    service: {
      name: 'my-graphql-app',
      url: 'http://localhost:4000/graphql'
    }
  }
};

Linking to the local schema won't provide all features such as switching schema tags and performance metrics.

Client-only schemas

One of the best features of the VS Code extension is the automatic merging of remote schemas and local ones when using integrated state management with Apollo Client. This happens automatically whenever schema definitions are found within a client project. By default, the VS Code extension will look for all files under ./src to find both the operations and schema definitions for building a complete schema for the application.

Client side schema definitions can be spread throughout the client app project and will be merged together to create one single schema. The default behavior can be controlled by adding specifictions to the apollo.config.js:

module.exports = {
  client: {
    service: "my-graphql-app"
    includes: ["./src/**/*.js"],
    excludes: ["**/__tests__/**"]
  }
}

Get the extension

Once you have a config set up and a schema published, install the Apollo GraphQL extension, then try opening a file containing a GraphQL operation.

When a file open, clicking the status bar icon will open the output window and print stats about the project associated with that file. This is helpful when confirming the project is setup properly.

Previous: The Apollo CLI
Next: Configuring Apollo projects