Basic Introduction about GrapgQl in magento2 Read more from.... https://devdocs.magento.com/guides/v2.3/graphql/

1. GraphQl
Name: Abhay Kumar Agrawal
Date: 18 March,2020

2. Topics
1. Introduction About GraphQl
2. API vs GraphQl
3. Magento2 module
4. GraphQl Tool
5. Type System
6. The Schema Definition Language(SDF)
7. Subscriptions
8. Module structure
9. Resolver

3. About GraphQl
● GraphQl is an open source server side technology which was developed by facebook to optimize
RESTFUL API calls.
● It is an execution engine and a data query language.
● GraphQl structures data in the form of a graph with its powerful query syntax for traversing,
retrieving and modifying data.
● The request made by a client to the GraphQl server is called a query.
● GraphQl is a query language for APIs - not a databases.

4. REST API vs GraphQl
GraphQl
● Single endpoint
● Client decide how data is returned
● Schema based
● Performance fast
● Development speed rapid
● Operations- Query,Mutations,subscriptions
● Specific data with a single API calls
● Community growing
REST API
● Lots of end point
● Server side decide how data is returned
● There is no schema for the data
● Multiple network calls take up more time
● Development speed slower
● Operations- CRUD
● Fixed data with multiple API calls
● Community large
GraphQl REST API

5. Magento2 module
There are many core module used GraphQl query language in Magento 2.3 version. Below is the list of
GraphQl Modules.
GraphQl is the parent Module for all the GraphQl related module, provides the framework for the
application to expose GraphQl compliant web services. We can check it under
folder_name/vendor/Magento/GraphQl path.
● BundleGraphQl
● CatalogGraphQl
● CatalogInventoryGraphQl
● CatalogUrlRewriteGraphQl
● CmsGraphQl
● CmsUrlRewriteGraphQl
● ConfigurableProductGraphQl
● CustomerGraphQl
● DownloadableGraphQl
● EavGraphQl
● GroupedProductGraphQl
● QuoteGraphQl
● StoreGraphQl
● SwatchesGraphQl
● TaxGraphQl
● ThemeGraphQl
● UrlRewriteGraphQl
● WeeeGraphQl

6. GraphQl Tool
● GraphiQL is an in-browser tool for write and testing GraphQl queries.
● For Google Chrome, ChromeiQL extension is supported, GraphQl Query. Others are Altair GraphQl
addon used in both Firefox as well as Chrome.

7. Type System
GraphQl is a strongly typed language. Type System defines various data types that can be used in a
GraphQl application. The type system helps to define the schema, which is a contract between client and
server. The commonly used GraphQl data types are as follows −
S.No. Type Description
1 Scalar Stores a single value
2 Object Shows what kind of object can be fetched
3 Query Entry point type to other specific types
4 Mutation Entry point for data manipulation
5 Enum Useful in a situation where we need the user to pick from a prescribed list of options.

8. Scalar Type
Scalar types are primitive data types that can store only a single value. The default scalar types that
GraphQl offers are −
● Int − Signed 32-bit Integer
● Float − Signed double precision floating point value
● String − UTF - 8-character sequence
● Boolean − True or false
● ID − A unique identifier, often used as a unique identifier to fetch an object or as the key for a
cache.
The syntax for defining a scalar type is as follows − field: data_type
type user{
Id: ID! # the “!” means required
firstname: string
lastname: string
email: string
}

9. Object Type
● The object type is the most common type used in a schema and represents a group of fields.
● The most basic components of a GraphQl schema are object types, which just represent a kind of
object you can fetch from your service, and what fields it has.
--Define an object type--
type Student {
stud_id:ID
firstname: String
age: Int
score:Float
}
--Defining a GraphQL schema--
type Query
{
stud_details:[Student]
}

10. Query Type
● A GraphQl query is used to fetch data. It is like requesting a resource in REST-based APIs. To keep
it simple, the Query type is the request sent from a client application to the GraphQl server.
● GraphQl uses the Schema Definition Language (SDL) to define a Query. Query type is one of the
many root-level types in GraphQl.
type Query {
human(id: ID!): Human
}
type Human {
name: String
appearsIn: [Episode]
starships: [Starship]
}
enum Episode {
X
Y
}
type Starship {
name: String
}
{
human(id: 1002) {
name
appearsIn
starships {
name
}
}
}

11. Mutation
● Mutations are operations sent to the server to create, update
or delete data.
● Mutation is one of the root-level data-types in GraphQl.
● Mutation queries modify data in the data store and returns a
value.
● A mutation contains the following elements:
● The keyword mutation
● An operation name for your local implementation.
● The mutation name
● The input object or attributes. Most mutations require an
input object that contains data or individual attributes for
the Magento server to process.
● The output object, which specifies which data the
mutation returns.
mutation {
createCustomer(
input: {
firstname: "XYZ"
lastname: "XYZ"
email: "xyz@example.com"
password: "xyzxyz@123"
is_subscribed: true
}
) {
customer {
firstname
lastname
email
is_subscribed
}
}
}
keyword

12. Enum
An Enum is similar to a scalar type. Enums are useful in a situation where the value for a field must be
from a prescribed list of options.
The syntax for defining an Enum type is −
type enum_name{
value1
value2
}
type Days_of_Week{
SUNDAY
MONDAY
TUESDAY
WEDNESDAY
THURSDAY
FRIDAY
SATURDAY
}

13. Schema Definition Language
GraphQL has its own type system that’s used to define the schema of an API. The syntax for writing
schemas is called Schema definition language (SDL).
type Person {
name: String!
age: Int!
}
type Person {
name: String!
age: Int!
posts: [Post!]!
}
type Post {
title: String!
}
type Post {
title: String!
author: Person!
}
Adding a relation
Defining simple types

14. Subscriptions
● In addition to fetching data using queries and modifying data using mutations, the GraphQL
supports a third operation type, called subscriptions.
● GraphQL subscriptions are a way to push data from the server to the clients that select to listen to real
time messages from the server.
● Subscriptions are similar to queries in that they specify a set of fields to be delivered to the client, but
instead of immediately returning a single answer, a result is sent every time a particular event happens
on the server.
type Subscription {
commentAdded(fullName: String!): Comment
}

15. Module structure
A GraphQL module’s schema.graphqls file defines how the attributes defined in the module can be used in GraphQL
queries and mutations.
The <module_name>/etc/schema.graphqls file:
● Defines the structure of queries and mutations.
● Determines which attributes can be used for input and output in GraphQL queries and mutations. Requests and
responses contain separate lists of valid attributes.
● Points to the resolvers that verify and process the input data and response.
● Serves as the source for displaying the schema in a GraphQL browser.
● Defines which objects are cached.

16. Resolver
● A resolver performs GraphQL request processing.
● It is responsible for:
– constructing a query
– fetching data
– performing any calculations
– transforming the fetched and calculated data into a GraphQL array format
– finally, it returns the query results for rendering

17. Thank You !!