title: Why WebStorm show errors in gql query inside apollo object in Vue component or .grapgql files
body: <p>I have a problem with WebStorm syntax highlighting. I created valid GraphQL query which works on localhost app but WebStorm says that </p>
  
  <blockquote>
    <p>unknown field "familyMembers" on object type "Query"</p>
  </blockquote>
  
  <p>and highlights the whole query in red.</p>
  
  <p>I am really confused but maybe I should change something inside <code>apollo.config.js</code> - if yes please tell me what.</p>
  
  <p>HelloWorld.vue</p>
  
  <pre><code>&lt;script&gt;
  import gql from 'graphql-tag';
  export default {
    apollo: {
      familyMembers: gql `
      query familyMembers {
          familyMembers {
              id
              firstName
              lastName
          }
      }`
    },
    name: 'HelloWorld',
    props: {
      msg: String
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>apollo.config.js</p>
  
  <pre><code>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',
          ],
      },
  };
  </code></pre>
  
  <p>Some screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/zupB7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zupB7.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/IzdWr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IzdWr.png" alt="enter image description here"></a></p>