Skip to content

Commit 14153df

Browse files
committed
Add README for the VS Code extension
1 parent 5a496e1 commit 14153df

4 files changed

Lines changed: 68 additions & 0 deletions

File tree

packages/apollo-vscode/README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
![Code completing queries](./images/variable-argument-completion.gif)
12+
![Running a query with variables](./images/query-with-vars.gif)
13+
![Viewing Engine statistics](./images/engine-stats.png)
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!
43.1 KB
Loading
1.44 MB
Loading
759 KB
Loading

0 commit comments

Comments
 (0)