javascriptvue.jsgraphqlwebstormvue-apollo

Why WebStorm show errors in gql query inside apollo object in Vue component or .grapgql files

I have a problem with WebStorm syntax highlighting. I created valid GraphQL query which works on localhost app but WebStorm says that

unknown field "familyMembers" on object type "Query"

and highlights the whole query in red.

I am really confused but maybe I should change something inside apollo.config.js - if yes please tell me what.

HelloWorld.vue

<script>
import gql from 'graphql-tag';
export default {
  apollo: {
    familyMembers: gql `
    query familyMembers {
        familyMembers {
            id
            firstName
            lastName
        }
    }`
  },
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

apollo.config.js

module.exports = {
    client: {
        service: {
            name: 'vav',
            // URL to the GraphQL API
            url: 'http://localhost:4000',
        },
        // Files processed by the extension
        includes: [
            'src/**/*.vue',
            'src/**/*.js',
        ],
    },
};

Some screenshots:

enter image description here

enter image description here

Solution

  • Ok so I figured out how to do this you do not need apollo.config.js you have to create .graphqlconfig in which you will declarate local schema path and endpoint url like that:

    {
  "name": "Untitled GraphQL Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:4000",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}