Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GraphQL Bangkok meetup 5.0

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

  • Login to see the comments

  • Be the first to like this

GraphQL Bangkok meetup 5.0

  1. 1. GraphQL BKK 5.0 Meetup, Bangkok, 19th March 2019
  2. 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. 3. Thank you
  4. 4. we ARE passionate software engineers, product managers and designers 4 jobs.nimblehq.co
  5. 5. 5 rubyconfth.com September 6th & 7th, 2019 - Pullman Bangkok King Power
  6. 6. GraphQL Asia graphql-asia.org 6 Asia's first GraphQL conference 12th & 13th April, Bangalore, India Join us and win today
  7. 7. GraphQL FAQ Tobias Meixner CTO @ BrikL 19 March 2019
  8. 8. 8 😂 😋 😒 1 2 3 Your GraphQL?
  9. 9. GraphQL - A Query Language for APIs not databases 9 … and more … and more … and more
  10. 10. 10
  11. 11. Why GraphQL? ● One source of truth ● e.g. using Schema-first ● Contract frontend-backend ● Introspection ● Flexible ● Frontend-driven development ● Use mocking
  12. 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. 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. 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. 15. What language to use? ● So many… ● GraphQL is language agnostic
  16. 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. 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. 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. 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. 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. 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. 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. 23. How to solve n+1? ● Listen to Michael!
  24. 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. 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. 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. 27. Data fetching in resolvers
  28. 28. I’m Michael
  29. 29. The resolver function(obj, args, context, info )
  30. 30. Relationships
  31. 31. Schema Resolver
  32. 32. Type field resolver
  33. 33. Schema Resolver
  34. 34. 21 queries (N+1)
  35. 35. Batching
  36. 36. DataLoader ● Simply utility for batching ● Made by Facebook
  37. 37. 21 2 queries
  38. 38. Drawbacks ● Introduces a new layer ● No support for arguments ● So many loaders!
  39. 39. GraphQL Batch Resolver (graphql-resolve-batch) ● Resolver composition ● GraphQL native ● Supports arguments
  40. 40. GraphQL Batch Resolver 1,674 weekly downloads 192 stars DataLoader 140,085 weekly downloads 6,911 stars
  41. 41. Fields
  42. 42. The resolver function(obj, args, context, info)
  43. 43. That’s all... Questions?
  44. 44. LUCAS FROM SCRATCH Lucas Munhoz @lnmunhoz
  45. 45. 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
  46. 46. LUCAS Let’s code!
  47. 47. LUCAS
  48. 48. 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
  49. 49. See you at GraphQL Asia!
  50. 50. 62 Thank you!Connect, Talk, Hack until 10pm
  51. 51. 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

×