## PhpStorm

1. Make sure your gridsome dev server is running: `cd frontend` and then `yarn dev` or `npm run dev`
2. Install JS GraphQL plugin: https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/
3. Select everything inside `<page-query>`, click the light bulb icon, choose "Inject language or reference" and select GraphQL, like this:

<img src="https://i.imgur.com/MnB663O.png" width="400" />
<img src="https://i.imgur.com/4Vv6lC6.png" width="400" />

_NOTE: you only have to do this once and then all your .vue files will support GraphQL queries inside `<page-query>` tags._

4. Create a file in the root of your project named `.graphqlconfig` and paste in something like the following:

```
{
  "name": "My App",
  "schemaPath": "my_endpoint_schema.graphql",
  "extensions": {
    "endpoints": {
      "My App Endpoint": {
        "url": "http://localhost:8080/___graphql",
        "headers": {
          // If you need auth, add it here
          "Authorization": "Bearer TOKEN"
        },
        "introspect": true
      }
    }
  }
}
```

5. Now close and reload your project - you should see a bubble in the bottom right of the IDE (see below) asking you if you want to "Get GraphQL Schema from Endpoint now?" (you can also see this in the PhpStorm console) - click the link that says "Introspect 'http://localhost:8080/_graphql'" and boom, it _should_ work!

<img src="https://i.imgur.com/kZ08Z2a.png" width="400" />

6. Once you are up and running you can use GraphQL right inside PhpStorm, just click GraphQL button in the footer:

<img src="https://i.imgur.com/HkTP7SG.png" width="400" />

7. And now you can use autocomplete!

<img src="https://i.imgur.com/CKFuaa8.png" width="400" />

8. To update the local schema file that PhpStorm is reading from (for example if you add a field to your API or whatever) then you can use the Update button in the GraphQL tab:

<img src="https://i.imgur.com/avYPvGX.png" width="400" />