Unkown directive in JS GraphQL

Question

I'm experiencing the following issue in the graphql schema declaration in Magento2. I use PhpStorm for development and, after installing the plugin JS GraphQL, it keeps prompting me errors on common directives as @doc, @resolver, ...

Does anyone know how to cope with this issue and let the plugin automatically recognize such directives as correct?

Thank you.

Answer 1

After some trials, I found the way to solve this tedious problem. I report here my solution, hoping it would be useful for others encountering such issue.

First, you need to properly setup the config file for JS GraphQL (here mine, change the url according to your website location):

{
  "name": "Local Magento GraphQL Schema",
  "schemaPath": "schema.graphql",
  "excludes": ["dev/**"],
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://local.magento.it/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": true
      }
    }
  }
}

Once you've done with that, you'll get a popup asking you to introspect the schema. Introspect it and choose the path where to store the schema file.

Open the schema file, and add on top the following directive declarations:

directive @doc(description: String="") on QUERY
    | MUTATION
    | FIELD
    | FRAGMENT_DEFINITION
    | FRAGMENT_SPREAD
    | INLINE_FRAGMENT
    | SCHEMA
    | SCALAR
    | OBJECT
    | FIELD_DEFINITION
    | ARGUMENT_DEFINITION
    | INTERFACE
    | UNION
    | ENUM
    | ENUM_VALUE
    | INPUT_OBJECT
    | INPUT_FIELD_DEFINITION

directive @resolver(class: String="") on QUERY
    | MUTATION
    | FIELD
    | FRAGMENT_DEFINITION
    | FRAGMENT_SPREAD
    | INLINE_FRAGMENT
    | SCHEMA
    | SCALAR
    | OBJECT
    | FIELD_DEFINITION
    | ARGUMENT_DEFINITION
    | INTERFACE
    | UNION
    | ENUM
    | ENUM_VALUE
    | INPUT_OBJECT
    | INPUT_FIELD_DEFINITION

directive @typeResolver(class: String="") on INTERFACE | OBJECT

directive @cache(cacheIdentity: String="" cacheable: Boolean=true) on QUERY

Such declarations come from the vendor/magento/module-graph-ql/etc/schema.graphqls file. At this point, the error should be disappeared and the directives properly recognized.

That's it.