- Saad Abbasi
I ❤️
Techkaro
NgGirls
Dawood UET
JS Dive
JS Meetup
React KHI
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
2012
Development started
2015
Open-Sourced
by facebook
Present
Evolving Specifications
First MeetUp in London
2016
Mobile Native Team
To save Internet Bandwidth
Declarative about data
Instant data, less loadings 🌀
Saves from overfetching and underfetching
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
HTML/CSS
JavaScript
API Data
600ms
400ms
600ms
~1.6 sec
is Actually good
Treeshaking
Bundle Optimising
GZip
Lazy Loading
???
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
SW-Caching
Inline Critical CSS
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)
resolver
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/
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
...
ANY QUESTIONS ?