How to enable GraphQL schema intelligence?

Question

Magento has numerous schema. graphics files spread across its modules. It also has custom directives such as @docand@resolver`. When I'm using PhpStorm with the JS GraphQL plugin, what is the best way to collect all of the schemas, including the custom directives, and get suggestions and remove the errors?

For example, in the Magento_DirectoryGraphQl/etc/schema.graphics file, in the very first custom query: currency: Currency @resolver(class: "Magento\DirectoryGraphQl\Model\Resolver\Currency") @doc(description: "The currency query returns information about store currency.") @cache(cacheable: false), I'm getting errors on almost the whole line. The Currency` type defined just below in the same file is not parsed, none of the custom directives are parsed either.

I have searched online a little and found that we need to have a .graphqlconfig file for the PhpStorm plugin to pick up and use. But I'm not sure what's the best way to implement it considering Magento's schema stitching priorities are based on the module load order. I've tried creating a config file too in the Magento root, but the plugin doesn't seem to pick it up.

If anyone has configured GraphQL schema intelligence in PhpStorm, I'd like to hear how you have done it. Thank you!

Answer 1

I used this following article. There are still some errors, so I think there may be other config settings needed.

1. Select the GraphQL tab in the bottom frame
2. Click + sign, choose a base directory, and click ok
3. This will generate .graphqlconfig with default http://localhost:8080/graphql URL
   • I am using Valet+ so I updated the URL to "https://site_name.test/graphql"
4. Click the green play arrow next to the URL to "Run introspection query..." which will generate schema. graphql file
   • Or double click GraphQL Endpoint in GraphQL panel and select "Get GraphQL schema from endpoint" (This didn't work immediately after updating URL)
5. Copy the directives from vendor/magento/module-graph-ql/etc/schema.graphqls and paste them in top of schema.graphql

NOTE: When you update schema you will need to repeat 4 and 5