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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  9. BFF (soundcloud)
    Backends for Frontends

    View full-size slide

  10. GraphQL
    A Query Language for API

    View full-size slide

  11. {
    me {
    name
    company
    }
    }

    View full-size slide

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

    View full-size slide

  13. {
    me {
    name
    company
    hobby
    }
    }

    View full-size slide

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

    View full-size slide

  15. Query
    REST GET method

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Type System
    ⚙⚙⚙

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. id?
    GraphQL Relay

    View full-size slide

  32. id?
    id
    GraphQL Relay

    View full-size slide

  33. GraphQL Relay

    View full-size slide

  34. GraphQL Relay

    View full-size slide

  35. GraphQL Relay
    1

    View full-size slide

  36. GraphQL Relay
    1
    1

    View full-size slide

  37. f(⚡)
    Functions
    ⚡⚡
    ⚡⚡

    View full-size slide

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

    View full-size slide

  39. Serverless
    Pattern / Architecture

    View full-size slide

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

    View full-size slide

  41. Pricing
    • IBM Cloud functions

    • 500ms प೯

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

    • $14.45

    View full-size slide

  42. Pricing
    • प೯ दр ⏰

    • ݫݽܻ ࣗ࠺۝

    • ਃ୒ പࣻ ⚡

    View full-size slide

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

    View full-size slide

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




    ⚡ ⚡

    View full-size slide

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










    Email
    Authentication

    View full-size slide

  46. GraphQL + Relay + Serverless

    View full-size slide

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

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

    View full-size slide