DEV Community

Cover image for Magento 2 Graphql Development Environment
Christopher Daniel
Christopher Daniel

Posted on • Updated on

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. Alt Text
  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
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  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 
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
lewisblakeney profile image
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!