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 Meetup Bangkok 4.0

GraphQL Bangkok Meetup slides including the Apollo Client, GraphQL Subscriptions and Xanthous Tech

  • Login to see the comments

GraphQL Meetup Bangkok 4.0

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

×