- Make sure your gridsome dev server is running:
cd frontend
and thenyarn dev
ornpm run dev
- Install JS GraphQL plugin: https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/
- Select everything inside
<page-query>
, click the light bulb icon, choose "Inject language or reference" and select GraphQL, like this:
NOTE: you only have to do this once and then all your .vue files will support GraphQL queries inside <page-query>
tags.
- 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
}
}
}
}
- 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!
- Once you are up and running you can use GraphQL right inside PhpStorm, just click GraphQL button in the footer:
- And now you can use autocomplete!
- 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:
thanks! I'm just starting out with gridsome this will help a lot.