This document summarizes a GraphQL meetup that took place on January 15th, 2019 in Bangkok, Thailand. It included talks on Apollo Client and its features for state management, GraphQL subscriptions, and using GRPC to build a GraphQL schema. There was also information provided about an upcoming GraphQL conference in April in Bangalore, India and opportunities to connect and hack together until 10pm.
10. Why GraphQL?
● Single source of truth
○ e.g. using Schema-first
○ Contract frontend-backend
● Introspection
● Flexible
● Frontend-driven development
○ Use mocking
10
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
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
45. 45
type Query {
users: [User!]
}
type Mutation {
createUser(email: String!): User
}
type Subscription {
users: [User!]
userCreated: User
}
# schema.graphql
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. 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
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?
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