joshangell/PhpStorm-and-Gridsome.md

## PhpStorm-and-Gridsome.md

      
    Raw
  

              PhpStorm-and-Gridsome.md
            
          
    PhpStorm


Make sure your gridsome dev server is running: cd frontend and then yarn dev or npm 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: