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.
- To configure graphql plugin open the graphql tab at the bottom.
- 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)
- 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
}
}
}
}
- Now refresh your graphql tab until your graphql endpoint shows up there. Double click it, and a popup ask you to select Endpoint action.
- Select
Get Graphql Schema from Endpoint
option. - 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 fileNow you can see series of
FilterTypeInput
error followed byUnexpected Token: "null"
error.
If you fix this error, allFilterTypeInput
errors will be removed.
So easy fix remove it, you wont get auto complete for null filter inFilterTypeInput
.
"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
Top comments (1)
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!