1.
GraphQL BKK 3.0
Meetup, Bangkok, 15th November 2018

2.
Nice to meet you!
Tobias
2
Lucas Junerey

3.
GraphQL BKK Roadmap
3
past
1.0
2.0
GraphQL
workshop
RSVP soon
Feb
2019
GraphQL Asia
Conference in Bangalore
Mar
2019

4.
Partnerships
Prisma BrikL
4
You & Your Company?
Talk to Us

5.
● GraphQL Introduction
● DIAKRIT
● AWS AppSync & Amplify (Pongsan)
● Prisma (Lucas & Patrik)
● TheAsia GraphQL (Vishal)
● Connect, Talk, Hack until 10pm
No breaks 😉
5
~ 9.30 pm

6.
6
😂 😋 😒
1 2 3
Your GraphQL?

7.
GraphQL
Introduction

8.
GraphQL - A Query Language for
APIs not databases
8
… and more
… and more
… and more

9.
9

10.
Who’s using GraphQL?
10
And more!

11.
11

12.
12

13.
13

14.
14

15.
15

16.
16

17.
17

18.
18

19.
19

20.
20

21.
21

22.
22

23.
23

24.
24

25.
25

26.
26

27.
27

28.
28

29.
29

30.
30

31.
31

32.
32

33.
33

34.
34

35.
35

36.
36

37.
37

38.
38

39.
39

40.
Prisma

41.
Typical 3-tier Architecture
Client API Server Database

42.
Data Access
API Server Database
ORM Frameworks
Query Performance
Error Handling
Boilerplate code
Data Access Layer
(Abstraction)
Real time
...

43.
Big companies implement
their own access layer

44.
The Data Access Layer
Client API Server DatabaseData LayerPrisma

45.
“
46

46.
type Query {
users(...): [User]!
user(...): User
usersConnection(...) UserConnection!
}
type Mutation {
createUser(...): User!
updateUser(...): User!
deleteUser(...): User!
upsertUser(...): User!
updateManyUsers(...): BatchPayload!
deleteManyUsers(...): BatchPayload!
}
type Subscription {
user(...): UserSubscriptionPayload!
}
prisma deploy
type User {
id: ID! @unique
name: String!
}
datamodel.graphql

47.
“
48

48.
Products API
Users API
MongoDB
PostgresSQL

49.
Prisma Components
Datamodel
datamodel.graphql
Prisma Server
prisma.yml
Prisma Client
js, ts, go
type User {
id: ID! @unique
name: String!
}
Docker
Heroku, AWS,
Azure, Prisma
Cloud
MySQL, MongoDB,
Postgres
await prisma.user({
name: "Tobias"
})
await prisma
.createUser({
name: "Patrick",
})

50.
Prisma Service
Query Engine
Your Application
Server
MySQL
Postgres
Mongo
Real time events
ValidationsG
R
A
P
H
Q
L
Under the hood
prisma client

51.
Prisma tools

52.
GraphQL Bindings

53.
“
54

54.
Why use GraphQL bindings?
● Simplify resolvers
● Great IDE support
● Reusable
● Compile-time error checking
● Works with any (typed) programming language.

55.
require('isomorphic-fetch');
const query = `
query {
posts {
title
}
}
`;
fetch('https://1jzxrj179.lp.gql.zone/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query }),
})
.then(res => res.json())
.then(res => console.log(res.data));

56.
Use cases
● GraphQL-based service-to-service communication
● Building GraphQL gateways
● Accessing GraphQL APIs from a script
● Adding custom operations to a GraphQL API
● Sharing runnable instances of GraphQL APIs

57.
graphqlgen

58.
“
61

59.
Features
● Schema first approach
● TypeScript type generation based on schema
● Resolver skeleton generation

60.
Problems when building
GraphQL Servers
● Inconsistencies between resolvers and the GraphQL
schema
● Lots of boilerplate needed for resolvers

61.
Type Generation
type Query {
user(id: ID!): User
}
type User {
id: ID!
name: String
}
schema.graphql
export interface User {
id: string
name: string | null
password: string
}
models.ts
language: typescript
schema: ./src/schema.graphql
models:
files:
- ./src/models.ts
output: ./src/generated/graphqlgen.ts
.graphqlgen.yml

62.
Generated type
export interface Type {
user: (
parent: {},
args: ArgsUser,
ctx: Context,
info: GraphQLResolveInfo
) => User | null | Promise<User | null>;
}
}

63.
Resolver Generation
createUser: (parent, args) => {
throw new Error('Resolver is not implemented')
}
createUser: (parent, { name }, ctx) => {
const id = ctx.data.idProvider();
const newUser = { id, name, postIDs: [] };
ctx.data.users.push(newUser);
return newUser;
}
Generated resolver -->
Actual resolver -->

64.
Demo

65.
Prisma Cloud
(demo)

66.
69

67.
GraphQL
vs REST ?
Or Both ?
At The Asia we use Loopback +GraphQl
WeYour Asia
TheAsia.com is an online travel booking platform. With
headquarters in Bangkok and offices in each of our country
destinations, TheAsia.com offers unrivalled local insight and a
unique, on-the-ground point of view.
With technology we try to bridge the gap between local tour
operators and Travellers.

68.
Why we opt graphql?
Agility Simplicity Frontend Architecture perspective
( I was not the one : )

69.
Problems to solve
Speedy Development Requirement, Push features every weak.
Continuous Changes,
Need for Keeping consistency in architecture and maintaining code quality and making it scalable for
long terms.
Loopback + graphQl
Loopback advantages:
Built in models & features , Very fast development, Code is modular & structured, Open API specification
Graphql advantages: (In our case)
Fast Frontend Development , Happy Developers :)

70.
Project objective
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua ipsum dolor sit amet.
With SSR

71.
Thank you.
Visit TheAsia.com for your upcoming Travel & Activities
around southeast asia.
https://www.theasia.com
Open for discussion and any questions ! :)
Reference Links :
Loopback 4 : https://loopback.io/doc/en/lb4/
OASgraph by loopback : https://v4.loopback.io/oasgraph.html
apollo-server-express: https://www.npmjs.com/package/apollo-server-express (Our current Implementation)

72.
75
Thanks!
Any questions?
Connect, Talk, Hack until 10pm
See you in January

73.
References
76
https://www.prisma.io/docs

74.
Credits (Slidetheme)
Special thanks to all the people who made and
released these awesome resources for free:
● Presentation template by SlidesCarnival
● Photographs by Unsplash
77