GraphQL
Gustav Jorlöv
KITS AB
AWS
Frontend
Namngivning
Klättring
Mountainbike
CSS
GraphQL
Node.JS
IoT
Serverless
Links
Agenda
- History
- Query Language
- Schema
- Overview
- Server
- Tooling
- Wrap up
History
Facebook Mobile
Open Source
Production
ready
2012
2013
2014
2015
2016
2017
2018
2019
2020
Public
GraphQL
Foundation
Query Language
{
me: {
name: "Gustav"
}
}{
me {
name
}
}Query Language
{
me: {
name: "Gustav",
employer: {
name: "KITS AB",
city: "Göteborg"
}
}
}{
me {
name
employer {
name
city
}
}
}{
employee(id: "17") {
name
employer {
name
city
}
}
}{
employee: {
name: "Gustav",
employer: {
name: "KITS AB",
city: "Göteborg"
}
}
}Query Language
{
me: {
name: "Gustav",
employer: {
name: "KITS AB",
city: "Göteborg"
}
}
}{
me {
name
employer {
name
city
}
}
}Aliases
{
me {
name
job: employer {
name
town: city
}
}
}{
employee: {
name: "Gustav",
job: {
name: "KITS AB",
town: "Göteborg"
}
}
}Query Language
{
employee: {
name: "Gustav"
}
}query TheEmployee($id: ID){
employee(id: $id) {
name
}
}Variables
{
id: "17"
}Schema
type Employee {
id: ID!
name: String!
skills: [Skill]
employer: Company
}
type Query {
me: Employee
employee(id: ID!): Employee
}type Skill {
id: ID!
subject: String
}
type Company {
id: ID!
name: String!
city: String
}Capabilities
Database Structure
Docs
Comments on types, fields, arguments
"Describes people at the company"
type Employee {
id: ID!
"First and Last name"
name: String!
skills: [Skill]
employer: Company
}
type Query {
me: Employee
employee(
"Employee ID"
id: ID!
): Employee
}Overview
Parse
Validate
Execute
Plain
Old
Code
resolvers.js
employees
companies
{
me {
name
}
}Resolvers
const resolvers = {
Query: {
me: (object, args, context) => {
// context holds info about logged in user
// make HTTP request to REST service 🥳
},
employee: (object, args, context) => {
// args.id === "17"
return {id: "17", name: "Gustav"}
}
}
}const resolvers = {
Query: {
me: (object, args, context) => {
// context holds info about logged in user
// make HTTP request to REST service 🥳
},
employee: (object, args, context) => {
// args.id === "17"
return {id: "17", name: "Gustav"}
}
},
Employee: {
employer: (object, args, context) => {
// object holds info about "parent" object
return getEmployerByEmployee(object.id)
}
}
}type Employee {
id: ID!
name: String!
skills: [Skill]
employer: Company
}
type Query {
me: Employee
employee(id: ID!): Employee
}
type Skill {
id: ID!
subject: String
}
type Company {
id: ID!
name: String!
city: String
}const resolvers = {
Query: {
me: (object, args, context) => {
// context holds info about logged in user
// make HTTP request to REST service 🥳
},
employee: (object, args, context) => {
// args.id === "17"
return {id: "17", name: "Gustav"}
}
},
Employee: {
employer: (object, args, context) => {
// object holds info about "parent" object
return getEmployerByEmployee(object.id)
},
skills: (object, args, context) => {
// object holds info about "parent" object
return getSubjectsByEmployee(object.id)
}
}
}Schema
Batch && Cache
- Client Cache
- Batching (DataLoader)
- Server Cache
POST /graphql
POST /rest/id/...
user(id:"17") {
friends {
friends {
friends {
name
}
}
}
}Tooling
Pros / Cons
- Under & over fetching
- Tooling
- Documentation
- IDE integration
- Move complexity
- No versions
- New things to learn
- One more moving part
Companies
More
- Subscriptions
- Persisted queries
- Analytics
- Edges and Nodes
GraphQL V2
By Gustav Jorlöv
