Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL + Relay + Serverless

텀블벅
November 10, 2017

GraphQL + Relay + Serverless

필요한 리소스만을 요청하고 사용하는 API 만들기

텀블벅

November 10, 2017
Tweet

Other Decks in Technology

Transcript

  1. GraphQL + Relay + Serverless
    ߅ഋध @ థ࠶ߢ

    View Slide

  2. థ࠶ߢ
    "#$%&'()*+,-./01234
    56

    View Slide

  3. ೙ਃೠ ܻࣗझ݅ਸ
    ਃ୒ೞҊ ࢎਊೞח API ٜ݅ӝ
    I

    View Slide

  4. ੢߄ҳפ
    ੢߄ҳפী׸ӟ࢚ಿ
    ࢸݺ оѺ ߓ࣠࠺
    ߓ࣠઱ࣗ
    25,000
    12,000
    2,500
    2,500
    ࢚ಿ

    View Slide

  5. ੢߄ҳפ
    ੢߄ҳפী׸ӟ࢚ಿ
    ࢸݺ оѺ ߓ࣠࠺
    ߓ࣠઱ࣗ
    25,000
    12,000
    2,500
    2,500
    ࢚ಿ
    ProductList
    Cart
    ShippingAddress
    ProductData
    ProductData

    View Slide

  6. ProductList
    Cart
    ProductData
    ProductData
    ShippingAddress
    /carts/1
    /products/1
    /products/2
    /shippingAddresses/1

    View Slide


  7. /carts/1?
    fields=products,coupons,shipping_addr
    esses&products[images, descriptions]
    /carts/1?
    fields=products,coupons,shipping_addr
    esses&products[images[high,low]]&prod
    ucts[descriptions[reviews, contents]]

    View Slide

  8. /carts_with_products_shipping_address_coupons
    /carts_with_products_recommendations
    /carts_with_products_videos
    /carts_with_products_newsletter_signups
    /carts_with_products_for_mobile
    /carts_with_products_for_tablets

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. BFF (soundcloud)
    Backends for Frontends

    View Slide

  14. View Slide

  15. GraphQL
    A Query Language for API

    View Slide

  16. {
    me {
    name
    company
    }
    }

    View Slide

  17. {
    me {
    name: "߅ഋध"
    company: "థ࠶ߢ"
    }
    }

    View Slide

  18. {
    me {
    name
    company
    hobby
    }
    }

    View Slide

  19. {
    me {
    name: "߅ഋध"
    company: "థ࠶ߢ"
    hobby: "୷ҳ"
    }
    }

    View Slide

  20. Query
    REST GET method

    View Slide

  21. REST
    GET /me
    {
    name: "߅ഋध",
    company: "థ࠶ߢ",
    hobby: "୷ҳ",
    favoriteColor: "౵ی࢝",
    country: "؀ೠ޹Ҵ",
    conference: "playnode 2017",
    cloudProvider: "IBM",
    age: "?^^^^",
    address: "??????????",
    cardNumber: "@#$D@#$#$%#$FD@#$@#"
    }

    View Slide

  22. GraphQL
    {
    user (id: "1") {
    name
    company
    }
    }

    View Slide

  23. GraphQL
    {
    user {
    name: "chulsoo"
    company: "younghee co."
    }
    }

    View Slide

  24. ProductList
    Cart
    ProductData
    ProductData
    ShippingAddress
    /carts/1
    /products/1
    /products/2
    /shippingAddresses/1
    REST

    View Slide

  25. ProductList
    Cart
    ProductData
    ProductData
    ShippingAddress
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    POST /graphql
    GraphQL

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. Type System
    ⚙⚙⚙

    View Slide

  31. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }

    View Slide

  32. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }

    View Slide

  33. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }

    View Slide

  34. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }

    View Slide

  35. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }

    View Slide

  36. Mutation
    REST POST/PUT/PATCH/DELETE Method

    View Slide

  37. Mutation
    mutation {
    createProduct(
    input: {
    description: "ݧ૓ ৩"
    price: 50000
    }
    )
    } {
    product {
    Price
    }
    }

    View Slide

  38. ؊ب ݈Ҋ ؏ب ݈Ҋ
    ٯ ௿ۄ੉঱౟о ਗೞח ч݅
    NO

    View Slide

  39. ࠺ऴ ֎౟ਕ௼ ਃ୒
    ୭ࣗച R

    View Slide

  40. View Slide

  41. View Slide

  42. Relay

    View Slide

  43. Relay

    View Slide

  44. Relay

    View Slide

  45. Relay

    View Slide

  46. Relay

    View Slide

  47. Relay

    View Slide

  48. Relay

    View Slide

  49. id?
    GraphQL Relay

    View Slide

  50. id?
    id
    GraphQL Relay

    View Slide

  51. GraphQL Relay

    View Slide

  52. GraphQL Relay

    View Slide

  53. GraphQL Relay
    1

    View Slide

  54. GraphQL Relay
    1
    1

    View Slide

  55. View Slide

  56. View Slide

  57. Server

    View Slide

  58. Serverless

    View Slide

  59. f(⚡)
    Functions
    ⚡⚡
    ⚡⚡

    View Slide

  60. Serverless
    = function-as-a-service?

    View Slide

  61. Serverless
    Pattern / Architecture

    View Slide

  62. ࢲߡ ҙܻ੄ ݽٚѦ
    ௿ۄ਋٘ীѱ ݐӝ੗ ☁
    /provisioning, OS patching/upgrading,
    scaling, self-healing, … /

    View Slide

  63. Pricing
    • IBM Cloud functions

    • 500ms प೯

    • 512MB @ 5,000,000 ਃ୒ പࣻ

    • $14.45

    View Slide

  64. Pricing
    • प೯ दр ⏰

    • ݫݽܻ ࣗ࠺۝

    • ਃ୒ പࣻ ⚡

    View Slide

  65. “ࢲߡ” ৉ೡ੄ ݽٚѦ
    ௿ۄ਋٘ীѱ ݐӝ੗ ☁
    /API Gateway, Message Queue, Search,
    Analytics, Authentication, … /

    View Slide

  66. ੉ “ࢲߡ”ٜਸ ೣࣻ۽ োѾೞ੗




    ⚡ ⚡

    View Slide

  67. View Slide

  68. GraphQL
    API Gateway
    Cart
    Product
    Search
    Message Queue
    Object Storage










    Email
    Authentication

    View Slide

  69. GraphQL + Relay + Serverless

    View Slide

  70. tumblbug.workable.com
    ହઑ੸ੋ दب੄ ӝࣿ੸ ӝ߈ਸ ೣԋ ٜ݅

    ࣗ೐౟ਝয ূ૑פযܳ ଺णפ׮.

    View Slide