How To Use GraphQL With Magento 2.3?
Magento 2.3 comes with many new features, and GraphQL is one of them. GraphQL is a query language that is defined by Facebook, and it can be used as an alternate option for REST and SOAP API. But if there are already some stable options available with Magento Developers, like REST and SOAP API, then why should they use GraphQL?
We use GraphQL because it provides an understandable description of the data in your API. You can create your response using Query Schema and get what you need.
Unlike other APIs, GraphQL provides a promising speed because you only request data that you need from the server. So, it will respond to you quickly. On the contrary, there is a predefined format in REST and SOAP.
One of the most interesting features of GraphQL is that you can retrieve multiple entity data in the same API call. Like in product API, if you need customer data, you can create a schema for both and retrieve it in one call. Whereas in REST and SOAP, you need to do two calls.
Let’s see how GraphQL work with Magento 2.3
How To Access GraphQL In Magento 2?
There are various add-ons available to run and check the GraphQL. For google chrome, there is a ChromeIql add-on available that supports GraphQL queries.
To start using the GraphQL, Create a URL with the Endpoint graphql.
For Example — https://[YOUR_DOMAIN]/graphql.
Add this in the URL bar of the ChromeIql. After adding the URL, you need to create a query schema to define the response type. Let’s assume we have to create a query schema to get products with SKU WJ12. I will create a schema as shown in the screenshot below:
How To Create Custom Schema?
There are various modules of Magneto which use GraphQL, like CatalogGraphQL, CmsGraphQL, CustomerGraphQL, etc. You can also define your GraphQL schema. Let’s see how to create a custom schema.
First of all, we need to define the query in file schema.graphqls, which is located in the etc-folder of your module. There are two types of schema — Query and mutation.
Please check the screenshots that guide you through the process of declaring the Query.
Here, we have defined the resolver class Zealousweb\GraphQL\Model\Resolver\Customer. Resolver class will include the logic of your API and will return the data.
So in the above example, when you add query as customcustomerschema, it will return the customer data, like entity_id, first name, last name, and email.
Your custom GraphQL module will be managed by the core Magento GraphQL module. You can check this under — vendor/magento/module-graph-ql.
Is GraphQL Using Caching?
There is a module available in core Magento to cache GraphQL queries. GraphQL uses full page caching to cache the query form the result. Without caching, each request needs to run code and database operation each time.
Magento 2 GraphQL cache work with the follow modules queries:
- categoryList
- cmsBlock
- cmsPage
- product
- urlResolver
However, some module queries are not using cache because those are updating data continuously.
- Cart
- Customers
- Customer orders
- Wishlist
- CustomerPaymentToken.
- Country
- Currency
- StoreConfig
Until now, we talked about GraphQL queries. But, what if you want to perform add, edit, and delete operations?
GraphQL mutations take place for such operations. It is similar to the POST and PUT method in REST API. First of all, let’s see the structure of mutations
Structure Of Mutations
Mutations must contain the following elements:
- The syntax must contain the keyword mutation
- The operation name (Required only if include variables)
- Name of your mutation
- Input object (Contain data or attributes to process)
- Output object (Specify which data mutation will return)
The Syntax For GraphQL Mutations
mutation: {createCustomer(input: CustomerInput!) {CustomerOutput}}
Here, mutation is the keyword that defines the mutation, and Createcustomer is the operation name. Similarly, you can specify input and output objects in place of CustomerInput and CustomerOutput.
Let’s say you want to create update customer mutations, then below is the example:
The above mutation will return the customer’s first name and email in response. Similarly, you can also use other attributes of customer information like Lastname, Date of birth, etc.
I hope this covers all the basic information about GraphQL. If it comes to the authentication, then you can use the same bearer token, which you are using in the REST API call. So, you need to call the first customer login API, and you can use the returned token in the other API call.
Note: If you are going to use GraphQL instead of REST and SOAP API, then which payment should you use?
Magento provides queries and mutations for the default payment options mentioned below:
- Braintree
- Braintree vault
- PayPal Express checkout
- Express checkout for the other PayPal solutions
- PayPal payflow link
- PayPal payflow pro
- PayPal payment advanced
If you are using any other payment method, then you need to create queries and mutations as per your requirement.
Conclusion
GraphQL is an exciting and new technology, and there are a plethora of reasons to choose it. There may be some APIs that have very few entities, and the relationships may not suit GraphQL, but you can use it for items, orders, users, etc.
With GraphQL, you can design your response format, so it is very useful while creating Mobile applications as well as web API. You can manage different formats of response in the same API call, and you do not need to create multiple APIs.
Happy Coding!
Originally published at https://www.zealousweb.com.
