GraphQL Bangkok Meetup slides including the AWS AppSync, Prisma and TheAsia presentation during November 2018 event. Sponsored by: https://www.diakrit.com/ https://aws.amazon.com/ https://www.prisma.io/ https://www.brikl.io/ Organised by: https://www.linkedin.com/in/lucasnmunhoz/ https://www.linkedin.com/in/junereycasuga/ https://www.linkedin.com/in/meixnertobias/

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

41. Prisma

42. Typical 3-tier Architecture
Client API Server Database

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

44. Big companies implement
their own access layer

45. The Data Access Layer
Client API Server DatabaseData LayerPrisma

46. “
46

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

48. “
48

49. Products API
Users API
MongoDB
PostgresSQL

50. 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",
})

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

52. Prisma tools

53. GraphQL Bindings

54. “
54

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

56. 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));

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

60. graphqlgen

61. “
61

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

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

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

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

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

67. Demo

68. Prisma Cloud
(demo)

69. 69

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

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

72. 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 :)

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

74. 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)

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

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

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