GraphQL has the potential to create incredible developer experiences, thanks to its strongly typed schema and query language. The Apollo platform brings these possibilities to life by enhancing your editor with rich metadata from your graph API. The Apollo GraphQL extension for VS Code brings an all-in-one tooling experience for developing apps with Apollo.
Getting startedFor 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. First, create an For the contents of this configuration file, select one of these options: Configure extension for schemas published to Apollo GraphOSExpand for instructions.To get all 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. After that's done, edit the
The See additional configuration options. To authenticate with GraphOS Studio to pull down your schema, create a Then go to your User Settings page in GraphOS Studio to create a new Personal API key.
After the key is found, add the following line to the
After this is done, VS Code can be reloaded and the Apollo integration will connect to GraphOS Studio to provide autocomplete, validation, and more. Configure extension to use introspection from a locally running serviceExpand for instructions.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
Linking to the local schema won't provide all features, such as switching graph variants and performance metrics. Configure extension for local schema filesExpand for instructions.You might not always have a running server to link to, so the extension also supports linking to a local schema file.
This is useful for working on a schema in isolation or for testing out new features.
To link to a local schema file, add the following to the
Adding Client-only schemasOne 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 JavaScript, TypeScript and GraphQL files under 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 specifications to the
Get the extensionOnce 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. FeaturesApollo for VS Code brings many helpful features for working on a GraphQL project. Intelligent autocompleteOnce configured, VS Code has full knowledge of the schema clients are running operations against, including client-only schemas (for things like local state mutations). Because of this, it have the ability to autocomplete fields and arguments as you type. Inline errors and warningsVS Code can use local or published schemas to validate operations before running them. Syntax errors, invalid fields or arguments, and even deprecated fields instantly appear as errors or warnings right in your editor, ensuring all developers are working with the most up-to-date production schemas. Inline field type informationBecause of GraphQL's strongly-typed schema, VS Code not only know about which fields and arguments are valid, but also what types are expected. Hover over any type in a valid GraphQL operation to see what type that field returns and whether or not it can be null. Performance insightsGraphQL's flexibility can make it difficult to predict the cost of an operation. Without insight into how expensive an operation is, developers can accidentally write queries that place strain on their graph API's underlying backends. Thanks to the Apollo platform's integration with VS Code and our trace warehouse, teams can avoid these performance issues altogether by instantly seeing the cost of a query right in their editor. The VS Code extension will show inline performance diagnostics when connected to a service with reported metrics in GraphOS Studio. As operations are typed, any fields that take longer than 1 ms to respond will be annotated to the right of the field inline! This gives team members a picture of how long the operation will take as more and more fields are added to operations or fragments. Syntax highlightingApollo's editor extension provides syntax highlighting for all things GraphQL, including schema definitions in Navigating projectsNavigating large codebases can be difficult, but the Apollo GraphQL extension makes this easier. Right-clicking on any field in operations or schemas gives you the ability to jump to (or peek at) definitions, as well as find any other references to that field in your project. Schema tag switchingApollo supports publishing multiple versions (variants) of a schema. This is useful for developing on a future development schema and preparing your clients to conform to that schema. To switch between graph variants, open the Command Palette ( TroubleshootingThe most common errors are configuration errors, like a missing Other errors may be caused from an old version of a published schema. To reload a schema, open the Command Palette ( Sometimes errors will show up as a notification at the bottom of your editor. Other, less critical, messages may be shown in the output pane of the editor. To open the output pane and get diagnostic information about the extension and the current service loaded (if working with a client project), just click the "Apollo GraphQL" icon in the status bar at the bottom. If problems persist or the error messages are unhelpful, open an issue in the Additional Apollo config optionsYou can add these configurations to your Apollo config file. client.tagNameOptional - custom tagged template literal. When using GraphQL with JavaScript or TypeScript projects, it is common to use the
|