A small attempt to deliver a session on GraphQL Introduction. I have prepared small Demo by using below technologies: Spring Boot, h2 Database (Server) Angular 8, Apollo GraphQL Client

1. For internal use only
Introduction to
GraphQL

2. For internal use only
Rest – REST in peace
LonglivetoGraphQL
Hello GraphQL
Reviews from Developers
++

3. For internal use only
Index
 History
 What is GraphQL
 Introduction
 Rapidly Growing community
 Alternative to Rest
 CRUD in GraphQL

4. 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

5. 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

6. 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

7. For internal use only
A Rapidly growing Community
Find more Users - https://graphql.org/users/

8. For internal use only
What we need
• User
• Users Posts
• Follower (likes)
• Commenters

9. For internal use only
Data Fetching with REST

10. For internal use only
Data Fetching with GraphQL

11. For internal use only
Single Endpoint vs Multiple Endpoints
Img Reference - https://blog.apollographql.com/graphql-vs-rest-5d425123e34b

12. 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

13. 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

14. 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
}
}
}
}

15. 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

16. For internal use only
GraphQL Type System
 Object Types
 Interfaces
 Unions
 Enumerations
 Fields
 List
 Scaler Types
 Int
 Float
 String
 Boolean
 Id (serialized in String)

17. 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

18. 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
}
}

19. 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

20. For internal use only
GraphQL Execution Engine
 Parse Query from Client
 Validate Schema
 Return JSON response
 Executes resolvers for each field

21. For internal use only
Server Architecture
/graphql
(Single
endpoint)
Dao Layer
Business
Layer
Schema
Validation
Layer
Resolvers
(Query,
Mutation,
Subscription)
/graphiql
(Editor)

22. 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

23. 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
}
}

24. 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

25. For internal use only
How to do Server-side Caching
 Server-side caching still is a challenge with GraphQL.

26. For internal use only
1) Should I stop Using Rest API Now?
2) Should I migrate current application to
GraphQL?
Answer is No

27. 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.

28. 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

29. For internal use only
Resources
 Find libraries for technologies –
 https://graphql.org/code/
 Editor -
 https://lucasconstantino.github.io/graphiql-online/

30. For internal use only
References
 https://graphql.org/learn/
 https://www.howtographql.com/
 https://blog.apollographql.com/graphql-vs-rest-5d425123e34b

31. 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