Introduction to GraphQL

- Saad Abbasi
About Me







I ❤️



Mentor
Techkaro
NgGirls
Dawood UET
Speaker
JS Dive
JS Meetup
React KHI
GraphQL
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
It 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.org
Timeline
2012
Development started
2015
Open-Sourced
by facebook
Present
Evolving Specifications
First MeetUp in London
2016
But wait, Why?
Mobile Native Team
To save Internet Bandwidth
Declarative about data
Instant data, less loadings 🌀
Saves from overfetching and underfetching
GraphQL is better
(way of doing)
REST.
GraphQL was created to coup up with
need for more flexibility and efficiency
in client-server communication.
GraphQL
flexibility
efficiency
HTML
CSS
JavaScript
API Data
800ms
500ms
1700ms
600ms
~3.6 sec
(Still a good figure for SPA)


Static hosting
Assets Bucket

API Server
Browser
Client-Side Rendered SPA
HTML/CSS
JavaScript
API Data
600ms
400ms
600ms
~1.6 sec
is Actually good
Treeshaking
Bundle Optimising
GZip
Lazy Loading
???
Optimisation techniques
SSR
CDNs
SW-Caching
Inline Critical CSS
RESTful
GraphQL
https://some.apis/foodies/2
// response
{
id: 2,
username: "jdoe99",
email: "jdoe99@example.com",
contact: "09001234567",
fullname: "John Doe",
firstname: "John",
lastname: "Doe",
address: {
city: "Karachi",
street: "Example street",
home: "000 floor, example etc apartments",
postal: 12377
},
education: {
degree: "Masters in Computer Security",
university: "SUCS",
year: 2018,
grade: "A",
record: "clear",
},
active: true,
favourites: ["Cheese Burgers", "Sandwiches"],
reviews: [
{
food: "009ancz8z81",
rating: 2,
createdAt: "2018-11-05T13:15:30",
updatedAt: "2018-11-05T13:15:35",
review: "worst food ever,"
},
{
food: "009ancz8z82",
rating: 5,
createdAt: "2018-11-05T13:15:30",
updatedAt: "2018-11-05T13:15:35",
review: "Loved it, great McD"
},
{
food: "009ancz8z83",
rating: 3,
createdAt: "2018-11-05T13:15:30",
updatedAt: "2018-11-05T13:15:35",
review: "Was just ok, liked it."
},
]
}// response
{
id: 2,
fullname: "John Doe",
address: {
home: "000 floor, example etc apartments"
},
active: true,
favourites: ["Cheese Burgers", "Sandwiches"],
reviews: [
{
review: "Loved it, great McD"
},
{
review: "Was just ok, liked it."
},
]
}query {
getFoodie(id: 2) {
id
fullname
active
address {
home
}
reviews(last: 2) {
review
}
}
}HTML/CSS
JavaScript
API Data
600ms
400ms
140ms
~1.14 sec 😱
SSR
CDNs
Treeshaking
Bundle Optimising
GZip
Lazy Loading
GraphQL
queries
Found the missing part
SW-Caching
Inline Critical CSS
Let's
Dive into GraphQL
GraphQL











In Action
const server = new ApolloServer({ resolvers, typeDefs });GraphQL
Server
schema.graphql
mutation
query
subscription
resolvers
typedefs
(apollo-server-express)


https://some.api
const resolvers = {
Mutation: {
updateFoodieName: (root, args = {}, ctx, info) => {
const { _id, name } = args;
return ctx.foodieModel.updateById(_id, {name})
}
},
Query: {
getFoodies: (root, args = {}, ctx, info) => {
return ctx.foodieModel.find(args)
}
},
};// SDL - Schema Definition Language
type Query {
getFoodies(name: String, _id: ID): [Foodie!]
}
type Mutation {
updateFoodieName(_id: ID!, name: String!): Foodie!
}
type Foodie {
_id: ID,
name: String
updatedAt: String
}typedefs (schema.gql)
- Registry for ops and types
- could be named anything
- SDL - Schema Definition Language
resolver
- should have same ops as typedefs
- query is for read and mutation is for write
- subscriptions - are not being discussed here
Architectural Overview
GraphQL server with connected database
- image credits: howtographql.com
GraphQL
Server
schema.graphql
mutation
query
resolvers
typedefs


GraphQL server integration with existing systems
GraphQL
Server
schema.graphql
mutation
query
resolvers
typedefs
https://legacy-system.com/

https://realtime-platform

GraphQL server with hybrid approach
GraphQL
Server
schema.graphql
mutation
query
subscription
resolvers
typedefs



https://legacy-system.com/
DEMO
Topics i did not cover...
Inner resolvers
Optimistic UI updates
Batching and caching
Data loaders
Root, context and info args
Schema stitching
Testing graphql
Error handling
Optimising resolvers
Developer tooling
Unions and Interfaces
...
THAT'S IT
ANY QUESTIONS ?
Introduction to GraphQL
By Saad Abbasi
Introduction to GraphQL
- 199