Bangkok's 5th edition of the local meetup all about GraphQL, GraphQL Asia, resolvers and end-to-end type safety

1. GraphQL BKK 5.0
Meetup, Bangkok, 19th March 2019

2. ● Nimble
● GraphQL FAQ (Tobias)
● Data fetching in resolvers (Michael)
● React + Apollo with TypeScript (Lucas)
● Connect, Talk, Hack until 10pm
No breaks maybe... 😉
2
~ 9.30 pm

3. Thank you

4. we ARE passionate software engineers,
product managers and designers
4
jobs.nimblehq.co

5. 5
rubyconfth.com
September 6th & 7th, 2019 - Pullman Bangkok King Power

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

7. GraphQL FAQ
Tobias Meixner
CTO @ BrikL
19 March 2019

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

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

10. 10

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

12. What is…?
● Schema
○ Blueprint that describes all data types and their relationships
○ What data we can fetched through queries and what data we can
update through mutations
● SDL
○ Schema definition language
● Query
○ Definition to fetch data
● Mutation
○ Definition to update data
● Subscription
○ Definition to subscribe to real-time updates in your data
● Directive
○ Describe alternate runtime execution and type validation behavior
in a GraphQL document

13. What is…?
● Arguments
○ Passed into your query, mutation, … functions to yield specific
values
● Resolver
○ Functions to resolve data from your data sources based e.g. on
arguments
● Types
○ Strongly typed definitions in your schema
● Fragment
○ Reusable parts of your e.g. query or mutation to avoid
duplication

14. How to connect to a
GraphQL API?
● Use one of the available frameworks available
in various languages such as React, Angular,
React Native
● Use traditional POST fetch mechanisms
passing your query as JSON string in the body
(axios, etc.)

15. What language to use?
● So many…
● GraphQL is language agnostic

16. How to connect legacy
APIs?
● Use GraphQL as layer in front of your existing
APIs
● Can use REST APIs as data sources in your
GraphQL resolvers
○ Same for legacy external APIs

17. What is schema
stitching?
● Merge other GraphQL schemas into your
schema to create one single layer
○ Can be your GraphQL schema from
different services
○ Can be external GraphQL schemas
(dangerous)
● Once merged you can use another schema
under its namespace

18. How to do
Authn/Authz?● Client:
○ Use JWT with scoped permissions and
authentication baked into the token
○ Pass JWT/Tokens as Authorization header
● Server:
○ Parse your token/header
○ Pass decoded user into context (optional)
○ Handle in centralized space such as
■ Middleware
■ Edges of your graph i.e. one type per
microservice/permission level

19. How to handle errors?
● A successful GraphQL query is supposed to
return a JSON object with a root field called
"data".
● If the request fails or partially fails (e.g. because
the user requesting the data doesn’t have the
right access permissions), a second root field
called "errors" is added to the response:
https://facebook.github.io/graphql/draft/#sec-Errors

20. How to secure a
GraphQL API?
● Ideally handle on network or load balancer level
● Additional options:
○ Maintain registry of allowed queries and
mutations
■ Generate register in build time
○ Can use persisted queries to anonymise
queries
○ Check query complexity to avoid DoS
○ Track query quantity
○ Handle Authn/Authz

21. How to handle caching?
● Cache in client (difficult)
○ Use existing packages such as Apollo
Client or Redux
● Cache in your datasource layer
○ Redis etc.
○ Cache your REST APIs that are sources of
your GraphQL
● Cache using existing packages
○ Apollo Server generates cache-control
headers then:
■ Use persisted queries with GET
request to a CDN
■ Use memory cache such as LRU

22. How to test?
● Client:
○ End-to-End testing
○ Use mocked data from GraphQL server
○ Use test frameworks such as
■ MockedProvider in react-apollo
● Server:
○ Mocha/Chai with JSON strings
○ Use packages such as:
■ apollo-server-testing

23. How to solve n+1?
● Listen to Michael!

24. How to scale GraphQL
APIs?
● Make GraphQL layer as thing as possible
● Split your schema
○ Schema stitching based on
microservice/product
○ Modularize based on service/types
○ Modularize based on data source
● Make use of subscriptions linked to a queue (e.g.
RabbitMQ)
● Split resolvers into services or serverless
functions
● https://blog.apollographql.com/modularizing-yo
ur-graphql-schema-code-d7f71d5ed5f2

25. How to get started?
● Follow popular tutorials:
○ https://www.howtographql.com/
○ https://www.apollographql.com/docs/tutorial/introducti
on.html
○ https://advancedreact.com/
○ https://roadtoreact.com/course-details?courseId=THE_
ROAD_TO_GRAPHQL
● Use opinionated/managed GraphQL services:
○ Hasura
○ Prisma
○ AppSync

26. References
● Read the specs:
○ https://facebook.github.io/graphql/draft/
● https://www.howtographql.com/
● https://www.apollographql.com/docs/tutorial/
introduction.html
● https://www.apollographql.com/docs/resourc
es/faq.html

27. Data
fetching in
resolvers

28. I’m Michael

29. The resolver
function(obj, args, context, info )

31. Relationships

33. Schema
Resolver

34. Type field resolver

35. Schema
Resolver

37. 21 queries (N+1)

38. Batching

39. DataLoader
● Simply utility for batching
● Made by Facebook

43. 21 2 queries

44. Drawbacks
● Introduces a new layer
● No support for arguments
● So many loaders!

45. GraphQL Batch Resolver
(graphql-resolve-batch)
● Resolver composition
● GraphQL native
● Supports arguments

50. GraphQL Batch Resolver
1,674 weekly downloads
192 stars
DataLoader
140,085 weekly downloads
6,911 stars

51. Fields

53. The resolver
function(obj, args, context, info)

55. That’s all...
Questions?

56. LUCAS
FROM
SCRATCH
Lucas Munhoz
@lnmunhoz

57. LUCAS
● I am from Brazil
● Making code since 2012
● FullStack Developer
● Independent Freelancer since 2015
● Traveling since 2017
● I am better at coding than talking 😅
Linkedin: @lucasnmunhoz
Github: @lnmunhoz

58. LUCAS
Let’s code!

59. LUCAS

60. Need help with GraphQL?
60
React + Apollo Client
Schema design
Apollo Server
Prisma
Speak to us
Tobias Meixner
tobias@brikl.io
Lucas Munhoz
ln.munhoz@gmail.com

61. See you at GraphQL Asia!

62. 62
Thank you!Connect, Talk, Hack until 10pm

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