|
| 1 | +# Apollo GraphQL VS Code |
| 2 | + |
| 3 | +## The Aim |
| 4 | + |
| 5 | +An all-in-one experience for developing applications with GraphQL. |
| 6 | + |
| 7 | +- IDE completion and feedback everywhere |
| 8 | +- Run queries you write without leaving the editor |
| 9 | +- Provide performance statistics next to your query definitions |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | +## Features |
| 16 | + |
| 17 | +- Loads your GraphQL schemas and queries automatically from an [Apollo Config](../apollo-cli/config.md) file |
| 18 | +- Adds syntax highlighting for GraphQL files and `gql` templates inside JavaScript files |
| 19 | +- Code-completes fields, arguments, types, and variables in your queries |
| 20 | +- Lets you run queryies, mutations, and subscriptions within the IDE with code-completion for variables |
| 21 | +- Displays performance statistics from [Apollo Engine](https://www.apollographql.com/engine) inline with your queries |
| 22 | +- Jump-to-definition for fragments and schema types |
| 23 | +- Detects fragment references and shows them next to definitions |
| 24 | + |
| 25 | +## How to get it? |
| 26 | + |
| 27 | +Open up VS Code and search for the extension "Apollo". |
| 28 | + |
| 29 | +## How to get it set up? |
| 30 | + |
| 31 | +The extension searches for [Apollo Config](../apollo-cli/config.md) definitions in `package.json` or `apollo.config.js` files. To set up a basic endpoint and queries defined in `.tsx` files, a config file would look like. |
| 32 | + |
| 33 | +```js |
| 34 | +// package.json |
| 35 | + |
| 36 | +{ |
| 37 | + ..., |
| 38 | + "apollo": { |
| 39 | + "schemas": { |
| 40 | + "mainSchema": { |
| 41 | + "endpoint": "http://localhost:4000/graphql" |
| 42 | + } |
| 43 | + }, |
| 44 | + "queries": [ |
| 45 | + { |
| 46 | + "schema": "mainSchema", |
| 47 | + "includes": [ "**/*.tsx" ] |
| 48 | + } |
| 49 | + ] |
| 50 | + } |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +## How do we run queries? |
| 55 | + |
| 56 | +The extension enables query execution when an `endpoint` is specified for the schema you are targeting. When you hit `Run query/mutations/subscription`, the extension will open a variables editor if there are any variables defined or directly run the query otherwise. |
| 57 | + |
| 58 | +Queries and mutations are executed with a default [Apollo Link HTTP](https://www.apollographql.com/docs/link/links/http.html) configured to run queries against the specified endpoint. Subscriptions are handled with [Apollo Link WS](https://www.apollographql.com/docs/link/links/ws.html) configured to run against the `subscriptions` key in your schema or your endpoint with `http` replaced by `ws` if the key is not defined. |
| 59 | + |
| 60 | +## Troubleshooting |
| 61 | + |
| 62 | +### Extension not starting correctly? Check the logs! |
| 63 | + |
| 64 | +If you're having trouble with the extension not launching or not detecting your configuration files, you can check the language server logs. |
| 65 | + |
| 66 | +1. Open the VS Code output tab from the bottom of your editor |
| 67 | +2. Switch the output view to "Apollo GraphQL" |
| 68 | +3. Check the logs and report any bugs you find! |
0 commit comments