Virtual Magento PWA Meetup organized by Wagento

1. #MMAMD

2. #MMAMD
Magento 2 GraphQL Overview
Chirag Dodia
Sr. Magento Developer - Wagento
@erchiragdodia

3. #MMAMD
Agenda
• What is GraphQL ?
• Why GraphQL ?
• GraphQL Vs Rest
• Current state of GraphQL in Magento 2
• Developer Tools to access GraphQL
• Queries
• Mutations
• GraphQL Module Structure

4. #MMAMD
What is GraphQL?
● GraphQL is a new API standard that provides a more efficient, powerful and
flexible alternative to REST and SOAP Web APIs.
● GraphQL was developed and open-sourced by Facebook in 2015 and is now
maintained by a large community of companies and individuals from all over the
world.
● GraphQL enables declarative data fetching where a client can specify exactly
what data it needs from an API. Instead of multiple endpoints that return fixed
data structures, a GraphQL server only exposes a single endpoint and
responds with precisely the data a client asked for.
● GraphQL is a query language for APIs - not database. It’s a replacement of
REST.

5. #MMAMD
Why GraphQL?
There are mainly three reason why PWA choose GraphQL over REST.
1. With the increase of mobile usage and low internet speed in some of the mobile
devices, it is a need of powerful query language which can minimize the data
that needs to transfer over network.
1. No more client specific endpoints. With GraphQL, each client can access
precisely the data it needs.
1. Faster Frontend Development.

6. #MMAMD
GraphQL Vs Rest
Single endpoint to gather multiple data. Gather Data using multiple endpoint.
No More Over and Under Fetching of
Data
Over and Under Fetching of Data
Rapid Product Iterations on the
Frontend
Due to rigid structure of Rest endpoint
every time app ui change we need to
adjust the endpoint that stop rapid
development.
No more outdated docs When structure changed, docs become
outdated.

7. #MMAMD
State of GraphQL in Magento 2
● Support All products types
● Supports PayPal, Braintree, and Authorize.Net payment methods.
● Supports Products, Customer, Categories, CMS, Coupons, Shopping cart,
Checkout, My Account etc.
● Some of the In Progress GraphQL Coverages which will available in 2.4 version
are following
○ ReOrders
○ Order history
○ Gift wrapping and message
○ Saved Payment methods

8. #MMAMD
Developer Tools to Access GraphQL
● There are many GraphQL client available are ChromeiQL, Altair, Postman etc.
● You can use any of the client to access GraphQL.
● But most handy and feature reach GraphQL client is Google Chrome, Altair
GraphQL Client.
● Demo of Altair GraphQL Client.

9. #MMAMD
GraphQL Queries
● Queries are use to retrieve a data from database same as GET method in
REST Api.
● GraphQL queries perform read operation. This includes wide variety of
information which include following
○ Product data
○ Customer data
○ Shopping cart data
○ Store configuration data etc

10. #MMAMD
GraphQL Query Structure
● The optional keyword query. If no keyword specify the processor assumes the
request is a query.
● The operation name. Optional if you are not using variables in your query.
● The query name.
● The Arguments.
● Fields.

11. #MMAMD
GraphQL Query Structure
query operationName{
queryName(arguments){
Fields
}
}
Let’s See the Demo

12. #MMAMD
GraphQL Mutations
● While Queries are use to retrieve a data, mutations are use to change the data.
● Mutations are use to Create, Update and Delete operations similar to REST
POST, PUT and DELETE.

13. #MMAMD
GraphQL Mutations Structure
● The keyword mutation
● The operation name. Optional if you are not using variables in your query.
● The mutation name
● The Arguments.
● Fields.

14. #MMAMD
GraphQL Mutations Structure
mutation operationName{
MutationName(arguments){
Fields
}
}
Let’s See the Demo

15. #MMAMD
GraphQL Module Structure

16. #MMAMD
GraphQL Module’s schema.graphqls
● schema.graphqls: A GraphQL module’s schema.graphqls file defines how the
attributes defined in the module can be used in GraphQL queries and
mutations.
● It is located under app/code/Vendor/Module/etc directory.
○ It’s define structure of the query
○ Define which attributes are use for input and output.
○ Points to resolver class.
○ Serves as the source for displaying the schema in a GraphQL browser.
○ Defines which objects are cached.

17. #MMAMD
GraphQL Module’s Resolver Class
● A resolver performs GraphQL request processing. In general, it is responsible
for constructing a query, fetching data and performing any calculations, then
transforming the fetched and calculated data into a GraphQL array format.
Finally, it returns the results wrapped by a callable function.
● It’s located under app/code/Vendor/Module/Model/Resolver directory.

18. #MMAMD
Demo of GraphQL Query and
Mutation

19. #MMAMD
Q & A

20. #MMAMD
Thank You All
For Attending