For internal use only
Introduction to
GraphQL
For internal use only
Rest – REST in peace
LonglivetoGraphQL
Hello GraphQL
Reviews from Developers
++
For internal use only
Index
 History
 What is GraphQL
 Introduction
 Rapidly Growing community
 Alternative to Rest
 CRUD in GraphQL
For internal use only
History
 Invented by Facebook
 Presented publically at React JS Conference in 2015 and made open source
 Specification stable version – 2018
 Find releases - https://graphql.github.io/graphql-spec/
2012
Development
Started
2015
Open Sourced
2016 2017 2018 2019
Evolving specification
For internal use only
What is GraphQL
• GraphQL is a query language for APIs and a runtime for fulfilling
those queries with your existing data.
• GraphQL provides a complete and understandable description of the
data in your API, gives clients the power to ask for exactly what they
need and nothing more, makes it easier to evolve APIs over time, and
enables powerful developer tools.
• GraphQL is not a database, it’s a specification
For internal use only
Introduction
 Provides an efficient, powerful and flexible approach to developing web
APIs
 Enables declarative data fetching
 Exposes Single endpoint and responds to queries
 Alternative to REST Services
 Graph QL is not only for React Developers
 It can be used with any programming language and framework
For internal use only
A Rapidly growing Community
Find more Users - https://graphql.org/users/
For internal use only
What we need
• User
• Users Posts
• Follower (likes)
• Commenters
For internal use only
Data Fetching with REST
For internal use only
Data Fetching with GraphQL
For internal use only
Single Endpoint vs Multiple Endpoints
Img Reference - https://blog.apollographql.com/graphql-vs-rest-5d425123e34b
For internal use only
Data Over fetching
{
"userName" : "moredee", "firstName" :
"Deepak",
"lastName" : "More",
"isActive" : "true",
"email" : "deepak.more@db.com",
"contactNumber" : "9420390095",
"city" : "Pune”
….
}
{
"userName" : "moredee", "firstName" :
"Deepak",
"lastName" : "More",
}
URL – /get/user/10
For internal use only
Data Under fetching
{
"userName" : "moredee", "firstName" :
"Deepak",
"lastName" : "More",
"isActive" : "true",
"email" : "deepak.more@db.com",
"contactNumber" : "9420390095",
….
}
{
"userName" : "moredee", "firstName" :
"Deepak",
"lastName" : "More",
“Address” : [
…
]
}
{
“id" : “123",
“address Line" : “Nagras Road",
“address Line 1" : “Aundh",
“city" : “Pune",
“State" : “Maharashtra",
“PinCode" : “411007",
….
}
URL – /user/10
URL – /address/123
For internal use only
Problem with Advanced requests
 Rest Api - GET /users/1/friends/1/dogs/1?include=user.name,dog.age
 GraphQL :
query {
user(id: 1) {
friends {
dogs {
name
}
}
}
}
For internal use only
GraphQL vs REST Comparison
Points REST GraphQL
EndPoints Multiple Single
Fetching data Over fetching and Under fetching Fetch Exact Data
Dependency on Endpoint Highly Dependent Not Dependent
Production Iteration at Frontend Slower Faster
Advanced Request Complex Easy
For internal use only
GraphQL Type System
 Object Types
 Interfaces
 Unions
 Enumerations
 Fields
 List
 Scaler Types
 Int
 Float
 String
 Boolean
 Id (serialized in String)
For internal use only
Schema Basics
 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).
 The ! following the type means that this field is required.
type User {
name: String!
contactNo: Int!
posts: [Post!]
}
type Post{
name: String!
author: User!
}
User Post
1 N
For internal use only
CRUD in GraphQL
 Graph QL Operations
 Query - use to read a data
 Mutation - use to write a data
 Subscriptions - use to listen for data
query {
search(id: “123456"){
name
posts(last: 1) {
title
}
followers {
name
}
}
}
Mutation {
createUser(name: “Deepak“, age: 28){
id
}
Subscription {
onCreate {
name
age
}
}
For internal use only
Self Explanatory
query{
book(isbn: “SEBT125") {
name
author {
firstname
lastName
}
}
Give me the book with isbn=“SEBT125"
Give me the book's name
Give me the book's author
Give me the author's first name
Give me the author’s last name
For internal use only
GraphQL Execution Engine
 Parse Query from Client
 Validate Schema
 Return JSON response
 Executes resolvers for each field
For internal use only
Server Architecture
/graphql
(Single
endpoint)
Dao Layer
Business
Layer
Schema
Validation
Layer
Resolvers
(Query,
Mutation,
Subscription)
/graphiql
(Editor)
For internal use only
2 Ways to access GraphQL App
 GraphQL Editor Application – (Windows)
 https://electronjs.org/apps/graphiql
 GraphiQL Server Utility
 Localhost:8080/graphiql
For internal use only
Validation / Error Handling GraphQL
Error status :
{
"data": null,
"errors": [
{
"message": "Cannot query field ‘names' on type ‘Book'. Did you mean ‘name'? (line 52,
column 5):n namen ^",
"locations": [
{
"line": 52,
"column": 5
}
]
}
]
}
query {
searchbook(name: “java") {
names
author {
firstname
lastName
}
}
For internal use only
Demo
 Used Technologies
 Node Js, Express, MySQL Database (Server Configuration)
 ReactJS, Websockets, Apollo Client (Using React Render Props)
 Demo Covers :
 Book Creation
 Subscription
For internal use only
How to do Server-side Caching
 Server-side caching still is a challenge with GraphQL.
For internal use only
1) Should I stop Using Rest API Now?
2) Should I migrate current application to
GraphQL?
Answer is No
For internal use only
Authentication and Authorization in GraphQL
 Authentication can be done by using Oauth
 To implement authorization, it is recommended to delegate any data
access logic to the business logic layer and not handle it directly in the
GraphQL implementation.
For internal use only
Disadvantages
 You need to learn how to set up GraphQL. The ecosystem is still rapidly
evolving so you have to keep up.
 You need to define the schema beforehand => extra work before you get
results
 You need to have a GraphQL endpoint on your server => new
libraries that you don't know yet
 The server needs to do more processing to parse the query and verify the
parameters
For internal use only
Resources
 Find libraries for technologies –
 https://graphql.org/code/
 Editor -
 https://lucasconstantino.github.io/graphiql-online/
For internal use only
References
 https://graphql.org/learn/
 https://www.howtographql.com/
 https://blog.apollographql.com/graphql-vs-rest-5d425123e34b
For internal use only
Demo
 Used Technologies
 Spring Boot, h2 Database (Server Configuration)
 ReactJS, Apollo Client (Using React Render Props)
 Demo Covers :
 Book Creation
 Book Deletion
 Books List

Introduction to Graph QL

  • 1.
    For internal useonly Introduction to GraphQL
  • 2.
    For internal useonly Rest – REST in peace LonglivetoGraphQL Hello GraphQL Reviews from Developers ++
  • 3.
    For internal useonly Index  History  What is GraphQL  Introduction  Rapidly Growing community  Alternative to Rest  CRUD in GraphQL
  • 4.
    For internal useonly History  Invented by Facebook  Presented publically at React JS Conference in 2015 and made open source  Specification stable version – 2018  Find releases - https://graphql.github.io/graphql-spec/ 2012 Development Started 2015 Open Sourced 2016 2017 2018 2019 Evolving specification
  • 5.
    For internal useonly What is GraphQL • GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. • GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. • GraphQL is not a database, it’s a specification
  • 6.
    For internal useonly Introduction  Provides an efficient, powerful and flexible approach to developing web APIs  Enables declarative data fetching  Exposes Single endpoint and responds to queries  Alternative to REST Services  Graph QL is not only for React Developers  It can be used with any programming language and framework
  • 7.
    For internal useonly A Rapidly growing Community Find more Users - https://graphql.org/users/
  • 8.
    For internal useonly What we need • User • Users Posts • Follower (likes) • Commenters
  • 9.
    For internal useonly Data Fetching with REST
  • 10.
    For internal useonly Data Fetching with GraphQL
  • 11.
    For internal useonly Single Endpoint vs Multiple Endpoints Img Reference - https://blog.apollographql.com/graphql-vs-rest-5d425123e34b
  • 12.
    For internal useonly Data Over fetching { "userName" : "moredee", "firstName" : "Deepak", "lastName" : "More", "isActive" : "true", "email" : "deepak.more@db.com", "contactNumber" : "9420390095", "city" : "Pune” …. } { "userName" : "moredee", "firstName" : "Deepak", "lastName" : "More", } URL – /get/user/10
  • 13.
    For internal useonly Data Under fetching { "userName" : "moredee", "firstName" : "Deepak", "lastName" : "More", "isActive" : "true", "email" : "deepak.more@db.com", "contactNumber" : "9420390095", …. } { "userName" : "moredee", "firstName" : "Deepak", "lastName" : "More", “Address” : [ … ] } { “id" : “123", “address Line" : “Nagras Road", “address Line 1" : “Aundh", “city" : “Pune", “State" : “Maharashtra", “PinCode" : “411007", …. } URL – /user/10 URL – /address/123
  • 14.
    For internal useonly Problem with Advanced requests  Rest Api - GET /users/1/friends/1/dogs/1?include=user.name,dog.age  GraphQL : query { user(id: 1) { friends { dogs { name } } } }
  • 15.
    For internal useonly GraphQL vs REST Comparison Points REST GraphQL EndPoints Multiple Single Fetching data Over fetching and Under fetching Fetch Exact Data Dependency on Endpoint Highly Dependent Not Dependent Production Iteration at Frontend Slower Faster Advanced Request Complex Easy
  • 16.
    For internal useonly GraphQL Type System  Object Types  Interfaces  Unions  Enumerations  Fields  List  Scaler Types  Int  Float  String  Boolean  Id (serialized in String)
  • 17.
    For internal useonly Schema Basics  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).  The ! following the type means that this field is required. type User { name: String! contactNo: Int! posts: [Post!] } type Post{ name: String! author: User! } User Post 1 N
  • 18.
    For internal useonly CRUD in GraphQL  Graph QL Operations  Query - use to read a data  Mutation - use to write a data  Subscriptions - use to listen for data query { search(id: “123456"){ name posts(last: 1) { title } followers { name } } } Mutation { createUser(name: “Deepak“, age: 28){ id } Subscription { onCreate { name age } }
  • 19.
    For internal useonly Self Explanatory query{ book(isbn: “SEBT125") { name author { firstname lastName } } Give me the book with isbn=“SEBT125" Give me the book's name Give me the book's author Give me the author's first name Give me the author’s last name
  • 20.
    For internal useonly GraphQL Execution Engine  Parse Query from Client  Validate Schema  Return JSON response  Executes resolvers for each field
  • 21.
    For internal useonly Server Architecture /graphql (Single endpoint) Dao Layer Business Layer Schema Validation Layer Resolvers (Query, Mutation, Subscription) /graphiql (Editor)
  • 22.
    For internal useonly 2 Ways to access GraphQL App  GraphQL Editor Application – (Windows)  https://electronjs.org/apps/graphiql  GraphiQL Server Utility  Localhost:8080/graphiql
  • 23.
    For internal useonly Validation / Error Handling GraphQL Error status : { "data": null, "errors": [ { "message": "Cannot query field ‘names' on type ‘Book'. Did you mean ‘name'? (line 52, column 5):n namen ^", "locations": [ { "line": 52, "column": 5 } ] } ] } query { searchbook(name: “java") { names author { firstname lastName } }
  • 24.
    For internal useonly Demo  Used Technologies  Node Js, Express, MySQL Database (Server Configuration)  ReactJS, Websockets, Apollo Client (Using React Render Props)  Demo Covers :  Book Creation  Subscription
  • 25.
    For internal useonly How to do Server-side Caching  Server-side caching still is a challenge with GraphQL.
  • 26.
    For internal useonly 1) Should I stop Using Rest API Now? 2) Should I migrate current application to GraphQL? Answer is No
  • 27.
    For internal useonly Authentication and Authorization in GraphQL  Authentication can be done by using Oauth  To implement authorization, it is recommended to delegate any data access logic to the business logic layer and not handle it directly in the GraphQL implementation.
  • 28.
    For internal useonly Disadvantages  You need to learn how to set up GraphQL. The ecosystem is still rapidly evolving so you have to keep up.  You need to define the schema beforehand => extra work before you get results  You need to have a GraphQL endpoint on your server => new libraries that you don't know yet  The server needs to do more processing to parse the query and verify the parameters
  • 29.
    For internal useonly Resources  Find libraries for technologies –  https://graphql.org/code/  Editor -  https://lucasconstantino.github.io/graphiql-online/
  • 30.
    For internal useonly References  https://graphql.org/learn/  https://www.howtographql.com/  https://blog.apollographql.com/graphql-vs-rest-5d425123e34b
  • 31.
    For internal useonly Demo  Used Technologies  Spring Boot, h2 Database (Server Configuration)  ReactJS, Apollo Client (Using React Render Props)  Demo Covers :  Book Creation  Book Deletion  Books List

Editor's Notes

  • #6 I simple language, Graph QL is actually a specification around http for how you get and receive resources from a server.
  • #9 GraphQL helps where your client needs a flexible response format to avoid extra queries and/or massive data transformation with the overhead of keeping them in sync. Using a GraphQL server makes it very easy for a client side developer to change the response format without any change on the backend.
  • #12 Single Endpoint is serving your purpose.
  • #13 Over-fetching is fetching too much data, meaning there is data in the response you don't use.
  • #14 Under-fetching is not having enough data with a call to an endpoint, forcing you to call a second endpoint.
  • #15  GraphQL helps where your client needs a flexible response format to avoid extra queries and/or massive data transformation with the overhead of keeping them in sync. Using a GraphQL server makes it very easy for a client side developer to change the response format without any change on the backend.
  • #20 With GraphQL, you can describe the required data in a more natural way. It can speed up development, because in application structures like top-down rendering in React, the required data is more similar to your component structure.
  • #26 One common concern with GraphQL, especially when comparing it to REST, are the difficulties to maintain server-side cache. With REST, it’s easy to cache the data for each endpoint, since it’s sure that the structure of the data will not change. With GraphQL on the other hand, it’s not clear what a client will request next, so putting a caching layer right behind the API doesn’t make a lot of sense.
  • #27 Should I abandon the REST API and always should use Graph QL. And is there like no usage of REST API now. I would say No There is no mandate like migrate your application to GraphQL right now. There is no such high an immediate need that you should implement graph QL Millions of Millions Queries in Single Day. – GraphQL REST Service wiil be there