Magento 2 Graphql Development Environment
Tags: magento2, graphql, phpstorm, magento
Published: 2019-10-02 08:26:50

---
title: Magento 2 Graphql Development Environment
published: true
description: Setting up PHPStorm JSGraphql plugin for Magento 2 Graphql
tags: magento2, Graphql, phpstorm, magento
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ol0oo062avynulfumdkb.png
series: Magento 2
---

## Graphql Development for Magento 2

Magento 2.3.X comes with Graphql API support. To learn more about graphql visit [graphql.org](https://graphql.org/).

Interested in Magento Graphql Endpoints, time to setup your development environment. 
When it comes to Magento development, [PHPStorm](https://www.jetbrains.com/phpstorm/) is the best IDE.
Download [JSGraphql plugin](https://plugins.jetbrains.com/plugin/8097-js-graphql) 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](https://thepracticaldev.s3.amazonaws.com/i/dpsrcmp25pywpphzsptp.png)
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

```json
{
  "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
      }
    }
  }
}
```
4. Now refresh your graphql tab until your graphql endpoint shows up there. Double click it, and a popup ask you to select Endpoint action.
5. Select `Get Graphql Schema from Endpoint` option.
6. 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](https://www.apollographql.com/docs/graphql-tools/schema-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](https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/docs/developer-guide)

Credits:
[@LenaOrebei](https://twitter.com/LenaOrobei)
[@mage2tv](https://twitter.com/mage2tv)