1.
GraphQL BKK 4.0
Meetup, Bangkok, 15th January 2019

2.
● Nimble
● GraphQL Introduction
● Apollo Client (Tobias)
● GraphQL Subscriptions (Lucas)
● GRPC to GraphQL use case (Xanthous)
● Connect, Talk, Hack until 10pm
No breaks 😉
2
~ 9.30 pm

3.
GraphQL Asia
graphql-asia.org
3
Asia's first GraphQL conference
12th & 13th April, Bangalore, India
Join us and win today

4.
Thank you
Nimble

5.
We ARE a software development company
5
jobs.nimblehq.co

6.
6

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

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

9.
9

10.
Why GraphQL?
● Single source of truth
○ e.g. using Schema-first
○ Contract frontend-backend
● Introspection
● Flexible
● Frontend-driven development
○ Use mocking
10

11.
GraphQL Workshop
tobias@brikl.io
11
React + Apollo Client
Schema design
Apollo Server
Prisma
Contact us

12.
Apollo Client
Introduction and State Management
Tobias Meixner
CTO @ BrikL

13.
Features
13
Apollo Client
● Connects to any GraphQL API
● Data fetching using GraphQL queries
● Query and Mutation components (render - prop)
○ Also have HOC use with Lifecycle methods
● Cache built-in
● State Management built-in (v2.5 - now apollo-link-state)
● Supports React, Vue, Angular, React Native
● Used by AppSync

14.
Query
14
Apollo Client

15.
Mutation
15
Apollo Client

16.
Mutation + Cache
16
Apollo Client

17.
(React)
State Management
What do you use?
A: React State?
B: Redux?
C: MobX?
D: Apollo?
17
Apollo Client

18.
State Management
Forms,
Inputs,
Filters,
Menu,
Optimistic UI
or any user interaction...
18
Data fetching
Caching
Reading
Mutations
Cache invalidation
Offline
Apollo Client

19.
Common solutions
19
https://www.foreach.be/blog/why-the-react-redux-combo-works-like-magic
MobX
Redux
...
Apollo Client

20.
Looks like this...
20
React State Management In a GraphQL Era - Kristijan Ristovski
https://www.youtube.com/watch?v=BCXne2Hb8wQ
Apollo Client

21.
State Management with Apollo
● Today with apollo-link state using resolvers
● Used by PayPal, Netflix, Airbnb
21
Apollo Client

22.
Schema
● Extend your remote
schema
22
Apollo Client

23.
Base state
● Use initializers in
Apollo Client
constructor
23
Apollo Client

24.
Query local data
● Use Query
component
for local and
remote data
24
Apollo Client

25.
Query local data
● Use Query
component
for local and
remote data
25
Apollo Client

26.
Local + Remote
● Combine usual
queries with
@client directive
● Make use of
fragments
26
Apollo Client

27.
Sample
27
Apollo Client
https://youtu.be/WM7YsPzWuTA?t=7m34s

28.
Mutation
● Direct cache writes
with Apollo
Consumer or HOC
OR
● Mutation
component will
update based on
Typename+ID
28
Apollo Client

29.
Business logic?
● Use resolvers
● Use update
function of
mutations
● Maybe refetch
29
Apollo Client

30.
btw...
● Use Apollo Client in your backend with node-fetch
● Use fragments as much as possible
● Just follow this (mind the Beta status):
https://www.apollographql.com/docs/tutorial/introduction.html
30
Apollo Client

31.
BrikL - Use case
Gatsby with build time Query components
Gatsby GraphQL Source with Apollo Client
“Client-only Apollo Client” + Apollo Link State
Apollo Server
31

32.
other GraphQL Clients
● GraphiQL
● Insomia
● Relay
● Lokka
● ...
32
Apollo Client

33.
Thank you
References & other talks:
Wes Bos - Advanced React & GraphQL courses
Kitze - Talks about React & State Management
https://www.youtube.com/watch?v=54cbkImmunY
https://link-state-is-dope.now.sh/
https://www.youtube.com/watch?v=BCXne2Hb8wQ
https://www.youtube.com/watch?v=WM7YsPzWuTA
https://github.com/apollographql/apollo-client
https://www.apollographql.com/docs/react/essentials/get-started.html
https://www.apollographql.com/docs/tutorial/local-state.html
33
Apollo Client

34.
GraphQL Subscriptions
Lucas Munhoz
Lead Developer @envisioning

35.
35
Who is this guy?

36.
36
Brasil === Brazil

37.
37

38.
38

39.
39

40.
40

41.
41
Be a speaker at the
next GraphQL Meetup

42.
42
- GraphQL Subscriptions (15 min)
- Live Coding (15 min)
- Surprise!

43.
43
“A subscription is a GraphQL request that asks the
server to push multiple results to the client in
response to some server-side trigger.”

44.
44
Whatever something happens in the server, if I am
interested, let me know :D

45.
45
type Query {
users: [User!]
}
type Mutation {
createUser(email: String!): User
}
type Subscription {
users: [User!]
userCreated: User
}
# schema.graphql

46.
46
Demo

47.
47
Webhook Example

48.
48

49.
49
subscribe {
events(type: "pull-request") {
state
user {
id
avatar_url
}
} // Result 2
{
data: {
state: "closed",
user: {
id: 353431,
avatar_url: "..."
}
}
// Result 1
{
data: {
state: "opened",
user: {
id: 353431,
avatar_url: "..."
}
}

50.
50
const resolvers = {
}
Mutation: {
createUser: async (root, args, { db, pubsub }) => {
const user = await db.user.create(args)
pubsub.publish("user.created", { userCreated: user })
return user
},
},
Subscription: {
userCreated: {
subscribe: (root, args, { pubsub }) =>
pubsub.subscribe(["user.created"]) // event stream
},
},

51.
51
const resolvers = {
}
Subscription: {
userCreated: {
subscribe: (root, args, { pubsub }) =>
pubsub.subscribe(["user.created"]) // event stream
},
},
Mutation: {
createUser: async (root, args, { db, pubsub }) => {
const user = await db.user.create(args)
pubsub.publish("user.created", { userCreated: user })
return user
},
},

52.
52
const resolvers = {
}
Mutation: {
createUser: async (root, args, { db, pubsub }) => {
const user = await db.user.create(args)
pubsub.publish("user.created", { userCreated: user })
return user
},
},
Subscription: {
userCreated: {
subscribe: (root, args, { pubsub }) =>
pubsub.subscribe(["user.created"]) // event stream
},
},

53.
53
User Service Send a
welcome
email
Notify slack
channel
Event System
userCreated userCreateduserCreated
publish
subscribe subscribe

54.
54
Event System
PubSub Topic from Redis or
RabbitMQ
Kafka Streams
Ticker from Stocks API
JavaScript EventEmitter (one instance)
...

55.
55

56.
56

57.
57

58.
58
Learn more
● Introducing GraphQL Subscriptions - Lee Byron
● https://www.howtographql.com/graphql-js/7-subscriptions/
● https://www.apollographql.com/docs/apollo-server/features/subscriptions
.html

59.
60
Simon Liang and Team @ Xanthous Tech
simon@x-tech.io
https://github.com/xanthous-tech

60.
61
● Motivation
● Solution - grpc-graphql-schema
● Live Demo in 25 LOCs
● gRPC protobuf Schema vs GraphQL Schema
○ Scalar Types
○ gRPC Messages vs GraphQL Object Types
○ gRPC Service calls vs GraphQL Queries / Mutations
○ gRPC Streaming vs GraphQL Subscriptions
● Q&A
Overview

61.
62
Motivation
● We work with developers with different backend language
expertise
○ Maximize Productivity
● Some languages have more powerful tools than others
○ Leverage the Best Features
● We want to quickly surface backend data from multiple sources
to frontend
○ Combine using GraphQL and Serve

62.
63
gRPC
● RPC Framework by Google
● Typed Definition w/ Protocol Buffers
● HTTP/2
● Streaming Support
https://grpc.io

63.
64
Solution - grpc-graphql-schema
● Maps gRPC protobuf Schema to GraphQL Schema
● Works out of the box
● Convention over Configuration
● Written in TypeScript
https://github.com/xanthous-tech/grpc-graphql-schema

64.
65
See it in Action!

65.
66
gRPC Schema vs GraphQL Schema
syntax = "proto3" ;
package io.xtech.example;
message Movie {
string name = 1;
int32 year = 2;
float rating = 3;
repeated string cast = 4;
}
message EmptyRequest {}
message MoviesResult {
repeated Movie result = 1;
}
message SearchByCastInput {
string castName = 1;
}
service Example {
rpc GetMovies (EmptyRequest) returns (MoviesResult) {}
rpc SearchMoviesByCast (SearchByCastInput)
returns (stream Movie) {}
}
type Movie {
name: String
year: Int
rating: Float
cast: [String]
}
type MoviesResult {
result: [Movie]
}
input SearchByCastInput {
castName : String
}
type Query {
ExampleGetMovies : MoviesResult
}
type Subscription {
ExampleSearchMoviesByCast (
SearchByCastInput : SearchByCastInput
): Movie
}
Maps to

66.
67
gRPC Scalar Types vs GraphQL Scalar Types
● gRPC
○ int32
○ int64
○ (more int’s...)
○ float
○ double
○ bool
○ string
○ bytes
● GraphQL
○ Int (32-bit)
○ Float (double)
○ Boolean
○ String

67.
68
gRPC Messages vs GraphQL Object Types
● gRPC
○ All fields are required
○ repeated for list
● GraphQL
○ Has input and type
○ Optional & Required
○ [] for list
message Movie {
string name = 1;
int32 year = 2;
float rating = 3;
repeated string cast = 4;
}
message SearchByCastInput {
string castName = 1;
}
type Movie {
name: String
year: Int
rating: Float
cast: [String]
}
input SearchByCastInput {
castName: String
}

68.
69
gRPC Service Methods vs GraphQL Queries / Mutations
● gRPC
○ Input / Output Message
Required
○ Unary Input
● GraphQL
○ Has Query and Mutation
○ Allows No Inputs and
Multiple Inputs
service Example {
rpc GetMovies (EmptyRequest) returns (MoviesResult) {}
}
type Query {
ExampleGetMovies: MoviesResult
}

69.
70
gRPC Streaming Methods vs GraphQL Subscriptions
● gRPC
○ Has both Client-Side and
Server-Side Streaming
● GraphQL
○ Uni-directional Pub/Sub
from Server to Client
service Example {
rpc SearchMoviesByCast (SearchByCastInput)
returns (stream Movie) {}
}
type Subscription {
ExampleSearchMoviesByCast (
SearchByCastInput : SearchByCastInput
): Movie
}
Quirks:
● Client-Side Streaming not supported
● GraphQL Subscription doesn’t know
when gRPC Streaming completes
○ can only unsubscribe from client
● gRPC Server Streaming cannot be
paused
○ needs bi-directional streaming
endpoints to react on GraphQL
unsubscribe

70.
71
Still Alpha - Future Improvements
● gRPC map, oneof Support
● gRPC proto Comments -> GraphQL Schema Descriptions
● Advanced Usage
○ Schema Stitching
○ Custom Schema Format
PRs Welcome!
https://github.com/xanthous-tech/grpc-graphql-schema

71.
72
We Build Software to Help Business Grow
From 0 to 1, from 1 to 100
● Remote Team of Engineering Experts
● Rapid Prototyping with React (Native) and GraphQL
● AWS & Serverless Architecture
● Elasticsearch for Advanced Data Discovery & Processing
● Reactive Programming for High-Performance Software
● NLU / NLP for Chatbots
Chat with us!
https://x-tech.io
hi@x-tech.io
Questions?

72.
73
Thanks!Connect, Talk, Hack until 10pm
See you in March

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