Magento 2 Graphql Development Environment

Graphql Development for Magento 2

Magento 2.3.X comes with Graphql API support. To learn more about graphql visit graphql.org.

Interested in Magento Graphql Endpoints, time to setup your development environment.
When it comes to Magento development, PHPStorm is the best IDE.
Download JSGraphql plugin from PHPStorm marketplace

Setup Graphql development environment in Magento

The graphql plugin can run queries, mutations etc defined in your project. It gives autocomplete suggestions for writing query and schema.

1. To configure graphql plugin open the graphql tab at the bottom.
2. Press the '+' icon in the tab, select where you have to place the config file. Usually place at project root folder. (you will see some errors in schema errors section in graphql tab, ignore it for now)
3. Now paste the content in generated .graphqlconfig file change $BASE_URL with your magento base url

{
  "name": "Practice GraphQL Schema",
  "schemaPath": "schema.graphql",
  "excludes": ["dev/**"],
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "$BASE_URL/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": true
      }
    }
  }
}

1. Now refresh your graphql tab until your graphql endpoint shows up there. Double click it, and a popup ask you to select Endpoint action.
2. Select Get Graphql Schema from Endpoint option.
3. Now schema.graphql file will be generated in project root.

Now auto complete will be available for schema, query and mutation.

Fix schema errors in graphql tab.

• The graphql custom directives by magento are not present in generated schema.
  Copy all the directives from vendor/magento/module-graph-ql\etc\schema.graphqls file to the top of generated schema.graphql file

• Now you can see series of FilterTypeInput error followed by Unexpected Token: "null" error.
  If you fix this error, all FilterTypeInput errors will be removed.
  So easy fix remove it, you wont get auto complete for null filter in FilterTypeInput.
  

"Is null"
null: String 

Find input FilterTypeInput and remove these two lines.

NOTE:

Whenever you update your schema. You have to update your generated schema.graphql file by repeating step 5 and fix these errors again.

For more information about configuring jsGraphql plugin

Credits:
@LenaOrebei
@mage2tv

Comments

[lewisblakeney]

Great article! It's amazing to see how much Magento 2 Graphql Development Environment can help with Magento Development Services. I'm looking forward to seeing more of these advances as the technology continues to evolve!