Encountering a syntax highlighting issue in WebStorm that is leaving me puzzled. I have a valid GraphQL query that functions correctly on my localhost application, yet WebStorm is flagging it with the error message:
unknown field "familyMembers" on object type "Query"
The entire query is being highlighted in red, adding to my confusion. Could the solution lie within tweaking the settings in the apollo.config.js file? If so, any suggestions would be greatly appreciated.
Here's a snippet from 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>
And here's the content of the apollo.config.js file:
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',
],
},
};
I've also attached some screenshots for reference: