SlideShare a Scribd company logo
1 of 74
Download to read offline
GraphQL BKK 4.0
Meetup, Bangkok, 15th January 2019
● 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
GraphQL Asia
graphql-asia.org
3
Asia's first GraphQL conference
12th & 13th April, Bangalore, India
Join us and win today
Thank you
Nimble
We ARE a software development company
5
jobs.nimblehq.co
6
7
😂 😋 😒
1 2 3
Your GraphQL?
GraphQL - A Query Language for
APIs not databases
8
… and more
… and more
… and more
9
Why GraphQL?
● Single source of truth
○ e.g. using Schema-first
○ Contract frontend-backend
● Introspection
● Flexible
● Frontend-driven development
○ Use mocking
10
GraphQL Workshop
tobias@brikl.io
11
React + Apollo Client
Schema design
Apollo Server
Prisma
Contact us
Apollo Client
Introduction and State Management
Tobias Meixner
CTO @ BrikL
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
Query
14
Apollo Client
Mutation
15
Apollo Client
Mutation + Cache
16
Apollo Client
(React)
State Management
What do you use?
A: React State?
B: Redux?
C: MobX?
D: Apollo?
17
Apollo Client
State Management
Forms,
Inputs,
Filters,
Menu,
Optimistic UI
or any user interaction...
18
Data fetching
Caching
Reading
Mutations
Cache invalidation
Offline
Apollo Client
Common solutions
19
https://www.foreach.be/blog/why-the-react-redux-combo-works-like-magic
MobX
Redux
...
Apollo Client
Looks like this...
20
React State Management In a GraphQL Era - Kristijan Ristovski
https://www.youtube.com/watch?v=BCXne2Hb8wQ
Apollo Client
State Management with Apollo
● Today with apollo-link state using resolvers
● Used by PayPal, Netflix, Airbnb
21
Apollo Client
Schema
● Extend your remote
schema
22
Apollo Client
Base state
● Use initializers in
Apollo Client
constructor
23
Apollo Client
Query local data
● Use Query
component
for local and
remote data
24
Apollo Client
Query local data
● Use Query
component
for local and
remote data
25
Apollo Client
Local + Remote
● Combine usual
queries with
@client directive
● Make use of
fragments
26
Apollo Client
Sample
27
Apollo Client
https://youtu.be/WM7YsPzWuTA?t=7m34s
Mutation
● Direct cache writes
with Apollo
Consumer or HOC
OR
● Mutation
component will
update based on
Typename+ID
28
Apollo Client
Business logic?
● Use resolvers
● Use update
function of
mutations
● Maybe refetch
29
Apollo Client
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
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
other GraphQL Clients
● GraphiQL
● Insomia
● Relay
● Lokka
● ...
32
Apollo Client
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
GraphQL Subscriptions
Lucas Munhoz
Lead Developer @envisioning
35
Who is this guy?
36
Brasil === Brazil
37
38
39
40
41
Be a speaker at the
next GraphQL Meetup
42
- GraphQL Subscriptions (15 min)
- Live Coding (15 min)
- Surprise!
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
Whatever something happens in the server, if I am
interested, let me know :D
45
type Query {
users: [User!]
}
type Mutation {
createUser(email: String!): User
}
type Subscription {
users: [User!]
userCreated: User
}
# schema.graphql
46
Demo
47
Webhook Example
48
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
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
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
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
User Service Send a
welcome
email
Notify slack
channel
Event System
userCreated userCreateduserCreated
publish
subscribe subscribe
54
Event System
PubSub Topic from Redis or
RabbitMQ
Kafka Streams
Ticker from Stocks API
JavaScript EventEmitter (one instance)
...
55
56
57
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
GraphQL Meetup Bangkok 4.0
60
Simon Liang and Team @ Xanthous Tech
simon@x-tech.io
https://github.com/xanthous-tech
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
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
63
gRPC
● RPC Framework by Google
● Typed Definition w/ Protocol Buffers
● HTTP/2
● Streaming Support
https://grpc.io
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
65
See it in Action!
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
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
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
}
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
}
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
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
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?
73
Thanks!Connect, Talk, Hack until 10pm
See you in March
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

More Related Content

What's hot

Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...
Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...
Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...Viach Kakovskyi
 
GNU GCC - what just a compiler...?
GNU GCC - what just a compiler...?GNU GCC - what just a compiler...?
GNU GCC - what just a compiler...?Saket Pathak
 
Translating Qt Applications
Translating Qt ApplicationsTranslating Qt Applications
Translating Qt Applicationsaccount inactive
 
Managing large scale projects in R with R Suite
Managing large scale projects in R with R SuiteManaging large scale projects in R with R Suite
Managing large scale projects in R with R SuiteWLOG Solutions
 
Golang basics for Java developers - Part 1
Golang basics for Java developers - Part 1Golang basics for Java developers - Part 1
Golang basics for Java developers - Part 1Robert Stern
 
State of the Art OpenGL and Qt
State of the Art OpenGL and QtState of the Art OpenGL and Qt
State of the Art OpenGL and QtICS
 
Gl tf siggraph-2013
Gl tf siggraph-2013Gl tf siggraph-2013
Gl tf siggraph-2013Khaled MAMOU
 
Etienne chauchot spark structured streaming runner
Etienne chauchot spark structured streaming runnerEtienne chauchot spark structured streaming runner
Etienne chauchot spark structured streaming runnerEtienne Chauchot
 
10 reasons to be excited about go
10 reasons to be excited about go10 reasons to be excited about go
10 reasons to be excited about goDvir Volk
 
Wonders of Golang
Wonders of GolangWonders of Golang
Wonders of GolangKartik Sura
 
Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)
Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)
Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)NETWAYS
 
PLV8 - The PostgreSQL web side
PLV8 - The PostgreSQL web sidePLV8 - The PostgreSQL web side
PLV8 - The PostgreSQL web sideLucio Grenzi
 
Network programming with Qt (C++)
Network programming with Qt (C++)Network programming with Qt (C++)
Network programming with Qt (C++)Manohar Kuse
 
Best Practices in Qt Quick/QML - Part 3
Best Practices in Qt Quick/QML - Part 3Best Practices in Qt Quick/QML - Part 3
Best Practices in Qt Quick/QML - Part 3ICS
 
How to lock a Python in a cage? Managing Python environment inside an R project
How to lock a Python in a cage?  Managing Python environment inside an R projectHow to lock a Python in a cage?  Managing Python environment inside an R project
How to lock a Python in a cage? Managing Python environment inside an R projectWLOG Solutions
 
Open Source Weather Information Project with OpenStack Object Storage
Open Source Weather Information Project with OpenStack Object StorageOpen Source Weather Information Project with OpenStack Object Storage
Open Source Weather Information Project with OpenStack Object StorageSammy Fung
 

What's hot (20)

Comparing C and Go
Comparing C and GoComparing C and Go
Comparing C and Go
 
Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...
Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...
Austin Python Meetup 2017: How to Stop Worrying and Start a Project with Pyth...
 
GNU GCC - what just a compiler...?
GNU GCC - what just a compiler...?GNU GCC - what just a compiler...?
GNU GCC - what just a compiler...?
 
Translating Qt Applications
Translating Qt ApplicationsTranslating Qt Applications
Translating Qt Applications
 
Managing large scale projects in R with R Suite
Managing large scale projects in R with R SuiteManaging large scale projects in R with R Suite
Managing large scale projects in R with R Suite
 
Golang basics for Java developers - Part 1
Golang basics for Java developers - Part 1Golang basics for Java developers - Part 1
Golang basics for Java developers - Part 1
 
State of the Art OpenGL and Qt
State of the Art OpenGL and QtState of the Art OpenGL and Qt
State of the Art OpenGL and Qt
 
Yandex.tank
Yandex.tankYandex.tank
Yandex.tank
 
Gl tf siggraph-2013
Gl tf siggraph-2013Gl tf siggraph-2013
Gl tf siggraph-2013
 
Etienne chauchot spark structured streaming runner
Etienne chauchot spark structured streaming runnerEtienne chauchot spark structured streaming runner
Etienne chauchot spark structured streaming runner
 
10 reasons to be excited about go
10 reasons to be excited about go10 reasons to be excited about go
10 reasons to be excited about go
 
Wonders of Golang
Wonders of GolangWonders of Golang
Wonders of Golang
 
Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)
Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)
Foreman - More than just a Puppet dashboard (Cfgmgmt Berlin 2016 - Dirk Goetz)
 
PLV8 - The PostgreSQL web side
PLV8 - The PostgreSQL web sidePLV8 - The PostgreSQL web side
PLV8 - The PostgreSQL web side
 
Network programming with Qt (C++)
Network programming with Qt (C++)Network programming with Qt (C++)
Network programming with Qt (C++)
 
Best Practices in Qt Quick/QML - Part 3
Best Practices in Qt Quick/QML - Part 3Best Practices in Qt Quick/QML - Part 3
Best Practices in Qt Quick/QML - Part 3
 
Qt Programming on TI Processors
Qt Programming on TI ProcessorsQt Programming on TI Processors
Qt Programming on TI Processors
 
How to lock a Python in a cage? Managing Python environment inside an R project
How to lock a Python in a cage?  Managing Python environment inside an R projectHow to lock a Python in a cage?  Managing Python environment inside an R project
How to lock a Python in a cage? Managing Python environment inside an R project
 
Airframe RPC
Airframe RPCAirframe RPC
Airframe RPC
 
Open Source Weather Information Project with OpenStack Object Storage
Open Source Weather Information Project with OpenStack Object StorageOpen Source Weather Information Project with OpenStack Object Storage
Open Source Weather Information Project with OpenStack Object Storage
 

Similar to GraphQL Meetup Bangkok 4.0

GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0Tobias Meixner
 
API Management for GraphQL
API Management for GraphQLAPI Management for GraphQL
API Management for GraphQLWSO2
 
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays
 
Kotlin REST & GraphQL API
Kotlin REST & GraphQL APIKotlin REST & GraphQL API
Kotlin REST & GraphQL APISean O'Brien
 
Sprint 44 review
Sprint 44 reviewSprint 44 review
Sprint 44 reviewManageIQ
 
Marco Liberati - Graph analytics
Marco Liberati - Graph analyticsMarco Liberati - Graph analytics
Marco Liberati - Graph analyticsCodemotion
 
GraphQL ♥︎ GraphDB
GraphQL ♥︎ GraphDBGraphQL ♥︎ GraphDB
GraphQL ♥︎ GraphDBGraphRM
 
GraphQL API Crafts presentation
GraphQL API Crafts presentationGraphQL API Crafts presentation
GraphQL API Crafts presentationSudheer J
 
Mumbai MuleSoft Meetup #17 - GraphQL
Mumbai MuleSoft Meetup #17 - GraphQLMumbai MuleSoft Meetup #17 - GraphQL
Mumbai MuleSoft Meetup #17 - GraphQLAkshata Sawant
 
Building Fullstack Serverless GraphQL APIs In The Cloud
Building Fullstack Serverless GraphQL APIs In The CloudBuilding Fullstack Serverless GraphQL APIs In The Cloud
Building Fullstack Serverless GraphQL APIs In The CloudNordic APIs
 
Implementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCImplementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCTim Burks
 
Building Fullstack Graph Applications With Neo4j
Building Fullstack Graph Applications With Neo4j Building Fullstack Graph Applications With Neo4j
Building Fullstack Graph Applications With Neo4j Neo4j
 
Exposing GraphQLs as Managed APIs
Exposing GraphQLs as Managed APIsExposing GraphQLs as Managed APIs
Exposing GraphQLs as Managed APIsWSO2
 
Sprint 45 review
Sprint 45 reviewSprint 45 review
Sprint 45 reviewManageIQ
 
Go and Uber’s time series database m3
Go and Uber’s time series database m3Go and Uber’s time series database m3
Go and Uber’s time series database m3Rob Skillington
 
202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUP202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUPRonald Hsu
 

Similar to GraphQL Meetup Bangkok 4.0 (20)

GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0
 
API Management for GraphQL
API Management for GraphQLAPI Management for GraphQL
API Management for GraphQL
 
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
 
Kotlin REST & GraphQL API
Kotlin REST & GraphQL APIKotlin REST & GraphQL API
Kotlin REST & GraphQL API
 
Sprint 44 review
Sprint 44 reviewSprint 44 review
Sprint 44 review
 
Marco Liberati - Graph analytics
Marco Liberati - Graph analyticsMarco Liberati - Graph analytics
Marco Liberati - Graph analytics
 
GraphQL ♥︎ GraphDB
GraphQL ♥︎ GraphDBGraphQL ♥︎ GraphDB
GraphQL ♥︎ GraphDB
 
GraphQL API Crafts presentation
GraphQL API Crafts presentationGraphQL API Crafts presentation
GraphQL API Crafts presentation
 
Mumbai MuleSoft Meetup #17 - GraphQL
Mumbai MuleSoft Meetup #17 - GraphQLMumbai MuleSoft Meetup #17 - GraphQL
Mumbai MuleSoft Meetup #17 - GraphQL
 
GraphQL + relay
GraphQL + relayGraphQL + relay
GraphQL + relay
 
Sprint 59
Sprint 59Sprint 59
Sprint 59
 
Building Fullstack Serverless GraphQL APIs In The Cloud
Building Fullstack Serverless GraphQL APIs In The CloudBuilding Fullstack Serverless GraphQL APIs In The Cloud
Building Fullstack Serverless GraphQL APIs In The Cloud
 
Implementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCImplementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPC
 
Revealing ALLSTOCKER
Revealing ALLSTOCKERRevealing ALLSTOCKER
Revealing ALLSTOCKER
 
Building Fullstack Graph Applications With Neo4j
Building Fullstack Graph Applications With Neo4j Building Fullstack Graph Applications With Neo4j
Building Fullstack Graph Applications With Neo4j
 
Exposing GraphQLs as Managed APIs
Exposing GraphQLs as Managed APIsExposing GraphQLs as Managed APIs
Exposing GraphQLs as Managed APIs
 
Sprint 45 review
Sprint 45 reviewSprint 45 review
Sprint 45 review
 
Go and Uber’s time series database m3
Go and Uber’s time series database m3Go and Uber’s time series database m3
Go and Uber’s time series database m3
 
202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUP202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUP
 
GraphQL
GraphQLGraphQL
GraphQL
 

More from Tobias Meixner

GraphQL Server - Single point of opportunities
GraphQL Server - Single point of opportunitiesGraphQL Server - Single point of opportunities
GraphQL Server - Single point of opportunitiesTobias Meixner
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0Tobias Meixner
 
BrikL - A GraphQL Native - GraphQL Asia 2019
BrikL - A GraphQL Native - GraphQL Asia 2019BrikL - A GraphQL Native - GraphQL Asia 2019
BrikL - A GraphQL Native - GraphQL Asia 2019Tobias Meixner
 
GraphQL Meetup Bangkok 3.0
GraphQL Meetup Bangkok 3.0GraphQL Meetup Bangkok 3.0
GraphQL Meetup Bangkok 3.0Tobias Meixner
 
GraphQL Bangkok Meetup 2.0
GraphQL Bangkok Meetup 2.0GraphQL Bangkok Meetup 2.0
GraphQL Bangkok Meetup 2.0Tobias Meixner
 

More from Tobias Meixner (7)

Public GraphQL APIs
Public GraphQL APIsPublic GraphQL APIs
Public GraphQL APIs
 
GraphQL Server - Single point of opportunities
GraphQL Server - Single point of opportunitiesGraphQL Server - Single point of opportunities
GraphQL Server - Single point of opportunities
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
 
BrikL - A GraphQL Native - GraphQL Asia 2019
BrikL - A GraphQL Native - GraphQL Asia 2019BrikL - A GraphQL Native - GraphQL Asia 2019
BrikL - A GraphQL Native - GraphQL Asia 2019
 
GraphQL Asia Speakers
GraphQL Asia SpeakersGraphQL Asia Speakers
GraphQL Asia Speakers
 
GraphQL Meetup Bangkok 3.0
GraphQL Meetup Bangkok 3.0GraphQL Meetup Bangkok 3.0
GraphQL Meetup Bangkok 3.0
 
GraphQL Bangkok Meetup 2.0
GraphQL Bangkok Meetup 2.0GraphQL Bangkok Meetup 2.0
GraphQL Bangkok Meetup 2.0
 

Recently uploaded

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Recently uploaded (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

GraphQL Meetup Bangkok 4.0

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 60. 60 Simon Liang and Team @ Xanthous Tech simon@x-tech.io https://github.com/xanthous-tech
  • 61. 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
  • 62. 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
  • 63. 63 gRPC ● RPC Framework by Google ● Typed Definition w/ Protocol Buffers ● HTTP/2 ● Streaming Support https://grpc.io
  • 64. 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
  • 65. 65 See it in Action!
  • 66. 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
  • 67. 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
  • 68. 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 }
  • 69. 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 }
  • 70. 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
  • 71. 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
  • 72. 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?
  • 73. 73 Thanks!Connect, Talk, Hack until 10pm See you in March
  • 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 74