Magento2.3 - GraphQL introduction

© 2019 Magento, Inc. Page | 1
Magento 2.3
Introduction to
GraphQL

© 2019 Magento, Inc.
.
Page | 2
Senior Software Engineer at BORN Group
https://www.linkedin.com/in/vishakha-borkar-9b96bb61
Vishakha Borkar

Agenda

Agenda
• Challenges with REST
• History and Adoption
• What is GraphQL?
• GraphQL v/s REST
• GraphQL Query Language
• GraphQL in Magento
• Magento GraphQL Implemenation
• GraphQL: Fetch combined/nested data
• GraphQL Mutations
• GraphQL Fragementation
•

Challenges with REST

Challenges with REST
 Increased mobile usage creates need for efficient data loading
 Variety of different frontend frameworks and platforms
 Fast development & expectation for rapid feature development

History and Adoption

History and Adoption
 Facebook started using GraphQL in 2012 in their native mobile apps
 Initially used and introduced with React.js
 Can be used everywhere a client needs to communicate with API
 Used by many companies. To name a few GitHub, Twitter, Yelp,
Coursea and Shopify

What is GraphQL?

What is GraphQL?
• GraphQL is a very powerful and strongly typed query
language.
• Used to communicate data between client and server.
GraphQL provides a complete and understandable description
of the data in your API
• Gives clients the power to ask for exactly what they need,
making it easier to evolve APIs over time
• Enables powerful development tools and thus making
GraphQL a more flexible & efficient approach than REST API.

GraphQL v/s REST

GraphQL v/s REST
REST GraphQL
Data Fetching Gathers data by accessing
multiple endpoints
Single query to the GraphQL server that
includes the concrete data requirements
Over- and Underfetching of
data
One of the most common
problems with REST is that
of over- and underfetching
Unlike traditional APIs, GraphQL exposes all
of the data from a single endpoint.
Rapid Product Iterations on
the Frontend
With every change that is
made to the UI, there is a
high risk that now there is
more (or less) data required
than before
changes on the client-side can be made
without any extra work on the server
Type System N/A GraphQL Schema Definition Language (SDL)
Insightful Analytics on the
Backend
Over- and Underfetching of
data are the drawbacks
Fine-grained insights about the data that’s
requested on the backend

GraphQL Query
Language

GraphQL Query Language
 GraphQL is an open-source query language for APIs (not databases)
developed by Facebook
 GraphQL query performs the READ operation in a GraphQL API
 It is replacement of REST
 Server-side runtime for executing queries by using a type system you
define for your data
 It is not tied to any specific database or storage engine

User get what they want

GraphQL in Magento
2.3

Why Magento2.3 introduced GraphQL?
 GraphQL is a powerful query
language for API´s and convenient
for javascript or Progressive Web
App solutions.
 With the rise of PWA, there is a
need to get smaller amounts of
data and to make fewer API
requests.
 Allowing the requestor to request a
limited subset of attributes and
Significantly smaller responses
 Continued...

 To support GraphQL, Magento is writing
an entirely new layer that interfaces
directly to the Query API
 The GraphQL implementation will be the
base on how a PWA frontend will retrieve
the data it needs

Modules

Current Status
Done In Progress
 Products
 Categories
 Customer
 Cms
 Coupons
 Store Config
 Shopping Cart
 Checkout
 My Account
 Wishlist
 Send to friend

Magento’s GraphQL implementation
(Basic module creation)

Module Structure

 Defines the structure of queries.
 Determines which attributes to make available for GraphQL queries.
You can define separate lists of attributes for queries and results.
 Points to the resolvers that verify and process the query data and
response
 Serves as the source for displaying the schema in a GraphQL
browser
<module_root>/etc/schema.graphqls

<module_root>/Model/Resolver/Customer.php

ChromeiQL
 Its a simple extension wrapper around the great GraphiQL
IDE allowing it to work with any GraphQL endpoint of your
choosing.
 As long as you are authorized to send requests to the
endpoint from your current browser session (cookies are
set etc.) you are good to use ChromeiQL.

Some alternates to ChromeiQL
 Insomnia
 https://support.insomnia.rest/article/61-graphql
 Altair GraphQL Client – Mozilla addon
 https://addons.mozilla.org/en-US/firefox/addon/altair-graphql-client/

Set endpoint url in ChromeiQL

ChromeiQL Documentation Explorer

Use “testcustomer” graphQL in ChromeiQL

GraphQL: Fetch combined/nested data

<module_root>/Model/Resolver/Store.php

<Module_Name>/Model/Resolver/Store.php

Use “pickUpStore” graphQL in ChromeiQL

GraphQL API Authentication

Apply authentication on GraphQL Access

GraphQL access with authentication

GraphQL access authentication failed

GraphQL Mutations

GraphQL Mutation
 GraphQL queries perform read operations, mutations change
the data
 Mutations are used to perform the Create, Update, delete
operation in GraphQl.
 It is similar to POST, PUT and DELETE in REST API

Basic example of mutation

Magento core - mutation example
(fetch customer’s token)

vendor/magento/module-customer-graph-ql/etc/schema.graphqls

vendor/magento/module-customer-graph-
ql/Model/Resolver/GenerateCustomerToken.php::resolve()

GraphQL Fragements

 A fragment is basically a reusable piece of query.
 In GraphQL, you often need to query for the same data fields in different
queries.
 By reusing this code, we can be more efficient with our time and reuse these
pieces of query logic
GraphQL Fragements

Fetch customer and pickupStore data at once

Thank you!
Vishakha Borkar
Born Commerce

Question!

Magento2.3 - GraphQL introduction

Recommended

More Related Content

What's hot (20)

Similar to Magento2.3 - GraphQL introduction (20)

Recently uploaded (20)

Magento2.3 - GraphQL introduction