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 3.0

GraphQL Bangkok Meetup slides including the AWS AppSync, Prisma and TheAsia presentation during November 2018 event.

Sponsored by:
https://www.diakrit.com/
https://aws.amazon.com/
https://www.prisma.io/
https://www.brikl.io/

Organised by:
https://www.linkedin.com/in/lucasnmunhoz/
https://www.linkedin.com/in/junereycasuga/
https://www.linkedin.com/in/meixnertobias/

  • Login to see the comments

  • Be the first to like this

GraphQL Meetup Bangkok 3.0

  1. 1. GraphQL BKK 3.0 Meetup, Bangkok, 15th November 2018
  2. 2. Nice to meet you! Tobias 2 Lucas Junerey
  3. 3. GraphQL BKK Roadmap 3 past 1.0 2.0 GraphQL workshop RSVP soon Feb 2019 GraphQL Asia Conference in Bangalore Mar 2019
  4. 4. Partnerships Prisma BrikL 4 You & Your Company? Talk to Us
  5. 5. ● GraphQL Introduction ● DIAKRIT ● AWS AppSync & Amplify (Pongsan) ● Prisma (Lucas & Patrik) ● TheAsia GraphQL (Vishal) ● Connect, Talk, Hack until 10pm No breaks 😉 5 ~ 9.30 pm
  6. 6. 6 😂 😋 😒 1 2 3 Your GraphQL?
  7. 7. GraphQL Introduction
  8. 8. GraphQL - A Query Language for APIs not databases 8 … and more … and more … and more
  9. 9. 9
  10. 10. Who’s using GraphQL? 10 And more!
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. 32
  33. 33. 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. Prisma
  41. 41. Typical 3-tier Architecture Client API Server Database
  42. 42. Data Access API Server Database ORM Frameworks Query Performance Error Handling Boilerplate code Data Access Layer (Abstraction) Real time ...
  43. 43. Big companies implement their own access layer
  44. 44. The Data Access Layer Client API Server DatabaseData LayerPrisma
  45. 45. “ 46
  46. 46. type Query { users(...): [User]! user(...): User usersConnection(...) UserConnection! } type Mutation { createUser(...): User! updateUser(...): User! deleteUser(...): User! upsertUser(...): User! updateManyUsers(...): BatchPayload! deleteManyUsers(...): BatchPayload! } type Subscription { user(...): UserSubscriptionPayload! } prisma deploy type User { id: ID! @unique name: String! } datamodel.graphql
  47. 47. “ 48
  48. 48. Products API Users API MongoDB PostgresSQL
  49. 49. Prisma Components Datamodel datamodel.graphql Prisma Server prisma.yml Prisma Client js, ts, go type User { id: ID! @unique name: String! } Docker Heroku, AWS, Azure, Prisma Cloud MySQL, MongoDB, Postgres await prisma.user({ name: "Tobias" }) await prisma .createUser({ name: "Patrick", })
  50. 50. Prisma Service Query Engine Your Application Server MySQL Postgres Mongo Real time events ValidationsG R A P H Q L Under the hood prisma client
  51. 51. Prisma tools
  52. 52. GraphQL Bindings
  53. 53. “ 54
  54. 54. Why use GraphQL bindings? ● Simplify resolvers ● Great IDE support ● Reusable ● Compile-time error checking ● Works with any (typed) programming language.
  55. 55. require('isomorphic-fetch'); const query = ` query { posts { title } } `; fetch('https://1jzxrj179.lp.gql.zone/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query }), }) .then(res => res.json()) .then(res => console.log(res.data));
  56. 56. Use cases ● GraphQL-based service-to-service communication ● Building GraphQL gateways ● Accessing GraphQL APIs from a script ● Adding custom operations to a GraphQL API ● Sharing runnable instances of GraphQL APIs
  57. 57. graphqlgen
  58. 58. “ 61
  59. 59. Features ● Schema first approach ● TypeScript type generation based on schema ● Resolver skeleton generation
  60. 60. Problems when building GraphQL Servers ● Inconsistencies between resolvers and the GraphQL schema ● Lots of boilerplate needed for resolvers
  61. 61. Type Generation type Query { user(id: ID!): User } type User { id: ID! name: String } schema.graphql export interface User { id: string name: string | null password: string } models.ts language: typescript schema: ./src/schema.graphql models: files: - ./src/models.ts output: ./src/generated/graphqlgen.ts .graphqlgen.yml
  62. 62. Generated type export interface Type { user: ( parent: {}, args: ArgsUser, ctx: Context, info: GraphQLResolveInfo ) => User | null | Promise<User | null>; } }
  63. 63. Resolver Generation createUser: (parent, args) => { throw new Error('Resolver is not implemented') } createUser: (parent, { name }, ctx) => { const id = ctx.data.idProvider(); const newUser = { id, name, postIDs: [] }; ctx.data.users.push(newUser); return newUser; } Generated resolver --> Actual resolver -->
  64. 64. Demo
  65. 65. Prisma Cloud (demo)
  66. 66. 69
  67. 67. GraphQL vs REST ? Or Both ? At The Asia we use Loopback +GraphQl WeYour Asia TheAsia.com is an online travel booking platform. With headquarters in Bangkok and offices in each of our country destinations, TheAsia.com offers unrivalled local insight and a unique, on-the-ground point of view. With technology we try to bridge the gap between local tour operators and Travellers.
  68. 68. Why we opt graphql? Agility Simplicity Frontend Architecture perspective ( I was not the one : )
  69. 69. Problems to solve Speedy Development Requirement, Push features every weak. Continuous Changes, Need for Keeping consistency in architecture and maintaining code quality and making it scalable for long terms. Loopback + graphQl Loopback advantages: Built in models & features , Very fast development, Code is modular & structured, Open API specification Graphql advantages: (In our case) Fast Frontend Development , Happy Developers :)
  70. 70. Project objective Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet. With SSR
  71. 71. Thank you. Visit TheAsia.com for your upcoming Travel & Activities around southeast asia. https://www.theasia.com Open for discussion and any questions ! :) Reference Links : Loopback 4 : https://loopback.io/doc/en/lb4/ OASgraph by loopback : https://v4.loopback.io/oasgraph.html apollo-server-express: https://www.npmjs.com/package/apollo-server-express (Our current Implementation)
  72. 72. 75 Thanks! Any questions? Connect, Talk, Hack until 10pm See you in January
  73. 73. References 76 https://www.prisma.io/docs
  74. 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 77

×