$30 off During Our Annual Pro Sale. View Details »

GraphQL 導入の反省と再挑戦 / jsconf jp 2021

GraphQL 導入の反省と再挑戦 / jsconf jp 2021

Masayuki Izumi

November 27, 2021
Tweet

More Decks by Masayuki Izumi

Other Decks in Programming

Transcript

  1. ©2021 Wantedly, Inc.
    GraphQL ಋೖͷ൓লͱ࠶௅ઓ
    Sponsor LT
    JSConf JP 2021
    2021-11-27 @izumin5210

    View Slide

  2. ©2021 Wantedly, Inc.
    @izumin5210
    ‣ "SDITRVBE8BOUFEMZ *OD
    #BDLFOE 8FC'SPOUFOEͷ5FDI-FBEతͳ͜ͱ΋͍ͯ͠·͢
    ୅ද࡞
    HSBQJ(PͷH31$TFSWFS༻ϚΠΫϩϑϨʔϜϫʔΫ
    6*σβΠϯγεςϜͷ3FBDU࣮૷ͷઃܭ
    (SBQI2-(BUFXBZͷઃܭɾ࣮૷ ˡࠓ೔͸͜ͷ࿩ʣ
    ‣ ޷͖ͳ5$QSPQPTBM͸&SSPS$BVTF
    IUUQTHJUIVCDPNUDQSPQPTBMFSSPSDBVTF
    ͍ͭͷ·ʹ͔4UBHFʹͳͬͯͨ

    View Slide

  3. ©2021 Wantedly, Inc.
    JavaScript and Wantedly
    https://speakerdeck.com/wantedly/for-engineers?slide=22

    View Slide

  4. ©2021 Wantedly, Inc.
    JavaScript and Wantedly
    όοΫΤϯυͰ΋Ұ෦ར༻

    ʢQVQQFUFFSʹΑΔը૾ੜ੒ͳͲʣ
    ੈ୅ʹ෼͔Ε͍ͯΔ͕ɺ࠷৽ͷ΋ͷ͸/FYUKTʹҠߦ

    👉 IUUQTEPDTXBOUFEMZEFW
    fi
    FMETBQQMJDBUJPOGSPOUFOEBSDIJUFDUVSF
    https://speakerdeck.com/wantedly/for-engineers?slide=22

    View Slide

  5. ©2021 Wantedly, Inc.
    JavaScript and Wantedly
    όοΫΤϯυͰ΋Ұ෦ར༻

    ʢQVQQFUFFSʹΑΔը૾ੜ੒ͳͲʣ
    ੈ୅ʹ෼͔Ε͍ͯΔ͕ɺ࠷৽ͷ΋ͷ͸/FYUKTʹҠߦ

    👉 IUUQTEPDTXBOUFEMZEFW
    fi
    FMETBQQMJDBUJPOGSPOUFOEBSDIJUFDUVSF
    https://speakerdeck.com/wantedly/for-engineers?slide=22
    https://docs.wantedly.dev/fields/application/frontend-architecture

    View Slide

  6. ©2021 Wantedly, Inc.
    JavaScript and Wantedly
    https://speakerdeck.com/wantedly/for-engineers?slide=22

    View Slide

  7. ©2021 Wantedly, Inc.
    JavaScript and Wantedly
    https://speakerdeck.com/wantedly/for-engineers?slide=22
    ࠓ೔͸͜Εͷ࿩

    View Slide

  8. ©2021 Wantedly, Inc.
    GraphQL and Wantedly
    ࠷ॳͷ GraphQL ಋೖ
    ‣ 2019೥͸͡Ί͝ΖͰɺWantedly Visit ͷاۀଆը໘ʹಋೖͨ͠ͷ͕࠷ॳ


    ‣ Web Frontend ʹ͓͚Δ՝୊Λղܾ͢ΔͨΊʹಋೖ


    - Web Frontend Ͱܕ෇͖ͷεΩʔϚͰɺੜ࢈ੑߴ͘։ൃ͍ͨ͠


    - ෳ਺ϚΠΫϩαʔϏε͔ΒͷσʔλΛू໿͠ɺϑϩϯτΤϯυͰ࢖͍΍͍͢ܗʹม׵͍ͨ͠


    ‣ ͍ΘΏΔ “BFF” తͳ࢖ΘΕํ


    - ϑϩϯτΤϯυدΓͷ։ൃऀ͕εΩʔϚઃܭɾ࣮૷Λ͓͜ͳ͏


    - ʢϞόΠϧͰ࢖ͬͯͳ͔ͬͨͷ͸ɺ୯७ʹݕূͰ͖ͯͳ͔ͬͨͷ΋͋Δʣ

    View Slide

  9. ©2021 Wantedly, Inc.
    GraphQL and Wantedly
    Web Frontend GraphQL server
    microservice
    microservice
    microservice
    JSON / HTTP
    Protobuf / gRPC

    View Slide

  10. ©2021 Wantedly, Inc.
    GraphQL and Wantedly
    ৼΓฦΓ - ࠷ॳͷ GraphQL ಋೖ
    ‣ Web Frontend ʹ͓͚Δੜ࢈ੑ͸͔֬ʹ޲্ͨ͠


    - εΩʔϚ͔Βਖ਼͍͠ܕ͕ੜ੒͞Εͯศར


    - ঢ়ଶ؅ཧ΋ Apollo Client ʹ೚ͤΔ͜ͱ͕Ͱ͖ͨ


    ‣ ҰํͰɺΞʔΩςΫνϟશମͱͯ͠࠷దͳܗʹͳ͔ͬͨ͸ผ


    ‣ Wantedly People(mobile app), Pro
    fi
    le ଆͷνʔϜ͕ BFF Λར༻͢Δͱ͖ʹ໰୊͕ݦࡏԽͨ͠

    View Slide

  11. ©2021 Wantedly, Inc.
    Wantedly People(mobile app) Architecture
    Mobile app
    gRPC
    server
    microservice
    microservice
    microservice
    JSON / HTTP
    Protobuf / gRPC
    grpc-gateway
    gRPC
    server
    grpc-gateway
    microservice
    microservice

    View Slide

  12. ©2021 Wantedly, Inc.
    Wantedly People(mobile app) Architecture
    gRPC
    server
    microservice
    microservice
    microservice
    JSON / HTTP
    Protobuf / gRPC
    grpc-gateway
    gRPC
    server
    grpc-gateway
    microservice
    microservice
    Mobile app
    ‣ όοΫΤϯυͱϞόΠϧ͕ڠಇͯ͠εΩʔϚΛઃܭ͢Δ


    - ओಋ͸όοΫΤϯυʹͳΔ͜ͱ΋ଟ͍


    - ϚΠΫϩαʔϏεɾΞʔΩςΫνϟͰ͸ɺόοΫΤϯυͷ
    γεςϜؒ௨৴΋εΩʔϚ͕ॏཁ


    ‣ Protobuf IDL ͔Β OpenAPI ͷεΩʔϚ΋ੜ੒Ͱ͖ΔͨΊɺ
    ϞόΠϧଆͰ΋εΩʔϚΛ׆༻Մೳ
    Protobuf ʹΑΔεΩʔϚۦಈ։ൃ

    View Slide

  13. ©2021 Wantedly, Inc.
    Wantedly People(mobile app) Architecture
    gRPC
    server
    microservice
    microservice
    microservice
    JSON / HTTP
    Protobuf / gRPC
    grpc-gateway
    gRPC
    server
    grpc-gateway
    microservice
    microservice
    Mobile app
    ‣ όοΫΤϯυͱϞόΠϧ͕ڠಇͯ͠εΩʔϚΛઃܭ͢Δ


    - ओಋ͸όοΫΤϯυʹͳΔ͜ͱ΋ଟ͍


    - ϚΠΫϩαʔϏεɾΞʔΩςΫνϟͰ͸ɺόοΫΤϯυͷ
    γεςϜؒ௨৴΋εΩʔϚ͕ॏཁ


    ‣ Protobuf IDL ͔Β OpenAPI ͷεΩʔϚ΋ੜ੒Ͱ͖ΔͨΊɺ
    ϞόΠϧଆͰ΋εΩʔϚΛ׆༻Մೳ
    Protobuf ʹΑΔεΩʔϚۦಈ։ൃ
    https://www.wantedly.com/companies/wantedly/post_articles/309513

    View Slide

  14. ©2021 Wantedly, Inc.
    Wantedly People(mobile app) Architecture
    Mobile app gRPC
    server
    microservice
    JSON / HTTP
    Protobuf / gRPC
    grpc-gateway
    microservice
    Web Frontend GraphQL server
    microservice
    microservice

    View Slide

  15. ©2021 Wantedly, Inc.
    Multi-application and Microservices and GraphQL
    Mobile app gRPC


    - ʮͲ͕ͬͪ࠷৽͚ͩͬʁʯ


    ‣ Protobuf to GraphQL ͷม׵ίʔυΊͬͪΌॻ͘ϋϝʹͳΔ
    GraphQL εΩʔϚΛ࣋ͭ
    Protobuf εΩʔϚΛ࣋ͭ

    View Slide

  16. ©2021 Wantedly, Inc.
    Mobile app gRPC
    server
    microservice
    JSON / HTTP
    Protobuf / gRPC
    grpc-gateway
    microservice
    GraphQL server
    microservice
    microservice
    Web Frontend
    ͦ΋ͦ΋…
    ‣ GraphQL ಋೖͷେ͖ͳϝϦοτͱͯ͋ͬͨ͠ͷ͸…


    - ʮ ܕͷ͋ΔεΩʔϚͱ͔ͦ͜Βͷ࣮૷ͷੜ੒ʯ


    ‣ Protobuf Λར༻͢Ε͹ɺࣅͨΑ͏ͳ͜ͱ͸Ͱ͖ͯ͠·͏

    View Slide

  17. ©2021 Wantedly, Inc.
    Reconsider “GraphQL”
    GraphQL ΛೖΕΔ໨తΛ࠶ߟ͢Δ
    ‣ GraphQL ͷϝϦοτ࠶ߟ


    - ܕͷ͋ΔεΩʔϚͱɺ͔ͦ͜Βͷίʔυੜ੒


    - ϑΟʔϧυɾؔ࿈ΦϒδΣΫτΛબ୒తʹɾॊೈʹऔಘͰ͖ΔΠϯλϑΣʔε


    - σʔλܗࣜɾ௨৴ํࣜͱ΋ʹҰൠతͳϑΥʔϚοτʢJSON over HTTPʣͳͷͰɺͲ͜Ͱ΋ಈ͘


    ‣ Wantedly ͰकΓ͍ͨͱ͜Ζ


    - όοΫΤϯυͷγεςϜؒ௨৴Ͱ΋εΩʔϚۦಈ։ൃ͍ͨ͠ʢطଘͷࢿ࢈Λ࢖͍͍ͨͷͰɺgRPC ࢖͍͍ͨʣ


    - 1ͭͷεΩʔϚΛઈରతͳιʔεͱͯ͠ѻ͍͍ͨ

    View Slide

  18. ©2021 Wantedly, Inc.
    Reconsider “GraphQL”
    GraphQL ΛೖΕΔ໨తΛ࠶ߟ͢Δ
    ‣ GraphQL ͷϝϦοτ࠶ߟ


    - ܕͷ͋ΔεΩʔϚͱɺ͔ͦ͜Βͷίʔυੜ੒


    - ϑΟʔϧυɾؔ࿈ΦϒδΣΫτΛબ୒తʹɾॊೈʹऔಘͰ͖ΔΠϯλϑΣʔε


    - σʔλܗࣜɾ௨৴ํࣜͱ΋ʹҰൠతͳϑΥʔϚοτʢJSON over HTTPʣͳͷͰɺͲ͜Ͱ΋ಈ͘


    ‣ Wantedly ͰकΓ͍ͨͱ͜Ζ


    - όοΫΤϯυͷγεςϜؒ௨৴Ͱ΋εΩʔϚۦಈ։ൃ͍ͨ͠ʢطଘͷࢿ࢈Λ࢖͍͍ͨͷͰɺgRPC ࢖͍͍ͨʣ


    - 1ͭͷεΩʔϚΛઈରతͳιʔεͱͯ͠ѻ͍͍ͨ
    Protobuf IDL Ͱهड़͞ΕͨεΩʔϚʹ͸υϝΠϯ஌͕ࣝ൓ө͞Ε͍ͯΔ


    υΩϡϝϯτ͕ࣗવݴޠͰ΋هड़͞Ε͍ͯΔ


    wantedly/apis ͱ͍͏ϦϙδτϦͰதԝ؅ཧ͞Ε͓ͯΓɺ


    ͔ͦ͜Β֤ݴޠ࣮૷͕ࣗಈੜ੒͞ΕΔ


    ͜ͷϦϙδτϦʹ͋ΒΏΔ஌͕ࣝूੵ͞ΕɺϓϩμΫτ։ൃΛՃ଎͍ͤͯ͞Δ


    ʢৄ͘͠͸ʮProtocol Buffers ʹΑΔϓϩμΫτ։ൃͷεεϝ - API ։ൃͷࠓੲ - | Wantedly Engineer BlogʯΛࢀরʣ


    ʢ…ͷͰɺεΩʔϚ̎ॏ؅ཧʹΑΓ৴པੑ͕طଘ͞ΕΔͷ͸ࠔΔʣ

    View Slide

  19. ©2021 Wantedly, Inc.
    Reconsider “GraphQL”
    GraphQL ΛೖΕΔ໨తΛ࠶ߟ͢Δ
    ‣ GraphQL ͷϝϦοτ࠶ߟ


    - ܕͷ͋ΔεΩʔϚͱɺ͔ͦ͜Βͷίʔυੜ੒


    - ϑΟʔϧυɾؔ࿈ΦϒδΣΫτΛબ୒తʹɾॊೈʹऔಘͰ͖ΔΠϯλϑΣʔε


    - σʔλܗࣜɾ௨৴ํࣜͱ΋ʹҰൠతͳϑΥʔϚοτʢJSON over HTTPʣͳͷͰɺͲ͜Ͱ΋ಈ͘


    ‣ Wantedly ͰकΓ͍ͨͱ͜Ζ


    - όοΫΤϯυͷγεςϜؒ௨৴Ͱ΋εΩʔϚۦಈ։ൃ͍ͨ͠ʢطଘͷࢿ࢈Λ࢖͍͍ͨͷͰɺgRPC ࢖͍͍ͨʣ


    - 1ͭͷεΩʔϚΛઈରతͳιʔεͱͯ͠ѻ͍͍ͨ

    View Slide

  20. ©2021 Wantedly, Inc.
    Wantedly ͷϓϩμΫτੑ࣭
    https://speakerdeck.com/wantedly/for-engineers?slide=22

    View Slide

  21. ©2021 Wantedly, Inc.
    Wantedly ͷϓϩμΫτੑ࣭
    https://speakerdeck.com/wantedly/for-engineers?slide=22
    ‣ Web ͱϞόΠϧͰυϝΠϯઃܭ͸ಉ͡


    - ϓϩμΫτΛލ͍Ͱ΋ʢڞ௨෦෼͸ʣಉ͡


    ‣ ΞϓϦɾػೳʹΑͬͯ৘ใྔͷଟՉ͕͋Δ


    - e.g. ϢʔβଆϓϩϑΟʔϧͱاۀଆϓϩϑΟʔϧʢεΧ΢τૹΔͱ
    ͖ʹݟΔ΍ͭʣ͸৘ใྔ͕ҧ͏

    View Slide

  22. ©2021 Wantedly, Inc.
    Reconsider “GraphQL”
    GraphQL ΛೖΕΔ໨తΛ࠶ߟ͢Δ
    ‣ GraphQL ͷϝϦοτ࠶ߟ


    • ܕͷ͋ΔεΩʔϚͱɺ͔ͦ͜Βͷίʔυੜ੒


    - ϑΟʔϧυɾؔ࿈ΦϒδΣΫτΛબ୒తʹɾॊೈʹऔಘͰ͖ΔΠϯλϑΣʔε


    - σʔλܗࣜɾ௨৴ํࣜͱ΋ʹҰൠతͳϑΥʔϚοτʢJSON over HTTPʣͳͷͰɺͲ͜Ͱ΋ಈ͘


    ‣ Wantedly ͰकΓ͍ͨͱ͜Ζ


    • όοΫΤϯυͷγεςϜؒ௨৴Ͱ΋εΩʔϚۦಈ։ൃ͍ͨ͠ʢطଘͷࢿ࢈Λ࢖͍͍ͨͷͰɺgRPC ࢖͍͍ͨʣ


    • 1ͭͷεΩʔϚΛઈରతͳιʔεͱͯ͠ѻ͍͍ͨ

    View Slide

  23. ©2021 Wantedly, Inc.
    GraphQL Gateway ߏ૝
    Visit app(iOS)
    microservice
    JSON / HTTP
    Protobuf / gRPC
    Web Frontend (user)
    GraphQL gateway
    microservice
    microservice
    Web Frontend (client)
    Visit app(Android)

    View Slide

  24. ©2021 Wantedly, Inc.
    GraphQL Gateway ߏ૝
    Visit app(iOS)
    microservice
    JSON / HTTP
    Protobuf / gRPC
    Web Frontend (user)
    GraphQL gateway
    microservice
    microservice
    Web Frontend (client)
    Visit app(Android)
    1ͭͷ GraphQL εΩʔϚΛશϑϩϯτΤϯυͰڞ༗͢Δ͜ͱͰɺ
    ࣅͨΑ͏ͳ API Λྔ࢈͢ΔίετΛݮΒ͢
    ʢ͋Δ͍͸ɺෆཁͳϑΟʔϧυΛऔಘͯ͠༨ܭͳϨΠςϯγ͕ൃੜ͢ΔͷΛ๷͙ʣ

    View Slide

  25. ©2021 Wantedly, Inc.
    GraphQL Gateway ߏ૝
    Visit app(iOS)
    microservice
    JSON / HTTP
    Protobuf / gRPC
    Web Frontend (user)
    GraphQL gateway
    microservice
    microservice
    Web Frontend (client)
    Visit app(Android)
    υϝΠϯϩδοΫ͸όοΫΤϯυʹ࣮૷͞ΕΔ
    ʢෳ਺ͷϑϩϯτΤϯυͰಉ͡ϩδοΫΛ࣮૷͢ΔͷΛ๷͙ʣ
    ৘ใͷू໿͸ GraphQL gateway Ͱ1ͭͷάϥϑΛ഑৴͢Δ͚ͩͳͷͰɺ֤ϑϩϯ
    τΤϯυ޲͚ͷ API Λߏங͢Δඞཁ͸ͳ͍
    ʢbelongs to user ͳΦϒδΣΫτʹ user Λ஫ೖ͢Δॲཧͱ͔ॻ͖͕͚ͪͩͲɺ
    ͦΕΛ͠ͳͯ͘ྑ͘ͳΔʣ

    View Slide

  26. ©2021 Wantedly, Inc.
    GraphQL Gateway ߏ૝
    Visit app(iOS)
    microservice
    JSON / HTTP
    Protobuf / gRPC
    Web Frontend (user)
    GraphQL gateway
    microservice
    microservice
    Web Frontend (client)
    Visit app(Android)
    .proto le
    .proto le
    .proto le
    GraphQL schema
    .proto ͔Β GraphQL schema ͱ࣮૷Λੜ੒͢ΔπʔϧΛࣗ࡞͠ɺ
    Schema ؅ཧͱ GraphQL server ࣮૷ͷίετΛݮΒ͢

    View Slide

  27. ©2021 Wantedly, Inc.
    graphql-gateway
    ‣ Protobuf ʹ͋Δ৘ใ͸ͳΔ΂͘ GraphQL ʹҾ͖ܧ͙


    - ίϝϯτ΋΋ͪΖΜ࢒͢ʢGraphiQL ΍ΫϥΠΞϯτଆͷ VSCode ্Ͱ΋ݟΕͯศརʣ


    - Nullability


    - (gRPC ʹ͸ non-null Λએݴ͢Δ࢓૊Έ͸ඪ४Ͱ͸ଘࡏ͠ͳ͍͕ɺίϝϯτ΍ extension ʹͦΕΛهड़͠Α͏ʂͱ͍͏ن໿Λಋೖ͍ͯ͠Δ →
    https://google.aip.dev/203ʣ


    - Abstraction: oneof -> union


    ‣ ΦϒδΣΫτ͸ Protobuf ͔Βੜ੒͠ɺΦϒδΣΫτͱΦϒδΣΫτͷ઀ଓ͸ TypeScript Ͱهड़


    ‣ কདྷతʹ͸։ൃͷεέʔϥϏϦςΟ୲อͷͨΊʹ GraphQL Federation ͱ͔ͨ͘͠ͳΓͦ͏


    ‣ ͱΓ͋͑ͣ1ՕॴʹೖΕͯΈͯݕূ


    - ΞʔΩςΫνϟʹେ͖ͳมߋΛೖΕΔͱ͖͸ఫୀՄೳʹ͓ͯ͘͠ͷ͕େ੾


    ‣ Node.js (TypeScript + GraphQL Nexus)


    - Go ΍ Rust ΋બ୒ࢶͱͯ͠͸͕͋ͬͨɺϦϑΝϨϯε࣮૷Ͱ͋Δ graphql-js Λ࢖͏͜ͱΛ༏ઌ


    - ͋ͱͰม͑ͨ͘ͳͬͯ΋ɺGraphQL ͷεΩʔϚ͕कΕ͍ͯΕ͹ͳΜͱ͔ͳΔ


    - Apollo Server ͳͲ͸ͱΓ͋͑ͣ࢖Θͳ͍ʢඞཁʹͳΓͦ͏ͳλΠϛϯάͰߟ͑Δʣ


    - Envelop ͸࢖͍͍ͨ https://www.envelop.dev/


    ‣ Resolver ಺Ͱ gRPC Λୟ͘


    - औಘܥ͸جຊతʹ DataLoader Λܦ༝͠ɺ͍ΘΏΔ N+1 ໰୊Λ๷͙


    - όοΫΤϯυ͕ FieldMask pattern ʹରԠ͍ͯ͠Δ৔߹ɺGraphQL ΫΤϦ͔Βݡ͘ FieldMask Λ૊ΈཱͯΔ


    View Slide

  28. ©2021 Wantedly, Inc.
    graphql-gateway
    ‣ Protobuf ʹ͋Δ৘ใ͸ͳΔ΂͘ GraphQL ʹҾ͖ܧ͙


    - ίϝϯτ΋΋ͪΖΜ࢒͢ʢGraphiQL ΍ΫϥΠΞϯτଆͷ VSCode ্Ͱ΋ݟΕͯศརʣ


    - Nullability


    - (gRPC ʹ͸ non-null Λએݴ͢Δ࢓૊Έ͸ඪ४Ͱ͸ଘࡏ͠ͳ͍͕ɺίϝϯτ΍ extension ʹͦΕΛهड़͠Α͏ʂͱ͍͏ن໿Λಋೖ͍ͯ͠Δ →
    https://google.aip.dev/203ʣ


    - Abstraction: oneof -> union


    ‣ ΦϒδΣΫτ͸ Protobuf ͔Βੜ੒͠ɺΦϒδΣΫτͱΦϒδΣΫτͷ઀ଓ͸ TypeScript Ͱهड़


    ‣ কདྷతʹ͸։ൃͷεέʔϥϏϦςΟ୲อͷͨΊʹ GraphQL Federation ͱ͔ͨ͘͠ͳΓͦ͏


    ‣ ͱΓ͋͑ͣ1ՕॴʹೖΕͯΈͯݕূ


    - ΞʔΩςΫνϟʹେ͖ͳมߋΛೖΕΔͱ͖͸ఫୀՄೳʹ͓ͯ͘͠ͷ͕େ੾


    ‣ Node.js (TypeScript + GraphQL Nexus)


    - Go ΍ Rust ΋બ୒ࢶͱͯ͠͸͕͋ͬͨɺϦϑΝϨϯε࣮૷Ͱ͋Δ graphql-js Λ࢖͏͜ͱΛ༏ઌ


    - ͋ͱͰม͑ͨ͘ͳͬͯ΋ɺGraphQL ͷεΩʔϚ͕कΕ͍ͯΕ͹ͳΜͱ͔ͳΔ


    - Apollo Server ͳͲ͸ͱΓ͋͑ͣ࢖Θͳ͍ʢඞཁʹͳΓͦ͏ͳλΠϛϯάͰߟ͑Δʣ


    - Envelop ͸࢖͍͍ͨ https://www.envelop.dev/


    ‣ Resolver ಺Ͱ gRPC Λୟ͘


    - औಘܥ͸جຊతʹ DataLoader Λܦ༝͠ɺ͍ΘΏΔ N+1 ໰୊Λ๷͙


    - όοΫΤϯυ͕ FieldMask pattern ʹରԠ͍ͯ͠Δ৔߹ɺGraphQL ΫΤϦ͔Βݡ͘ FieldMask Λ૊ΈཱͯΔ


    ࣗຫ͍ͨ͠࿩͍ͨ͜͠ͱ͸ແݶʹ͋Δ͕͕࣌ؒ଍Γͳ͍

    View Slide

  29. ©2021 Wantedly, Inc.
    graphql-gateway
    ‣ Protobuf ʹ͋Δ৘ใ͸ͳΔ΂͘ GraphQL ʹҾ͖ܧ͙


    - ίϝϯτ΋΋ͪΖΜ࢒͢ʢGraphiQL ΍ΫϥΠΞϯτଆͷ VSCode ্Ͱ΋ݟΕͯศརʣ


    - Nullability


    - (gRPC ʹ͸ non-null Λએݴ͢Δ࢓૊Έ͸ඪ४Ͱ͸ଘࡏ͠ͳ͍͕ɺίϝϯτ΍ extension ʹͦΕΛهड़͠Α͏ʂͱ͍͏ن໿Λಋೖ͍ͯ͠Δ →
    https://google.aip.dev/203ʣ


    - Abstraction: oneof -> union


    ‣ ΦϒδΣΫτ͸ Protobuf ͔Βੜ੒͠ɺΦϒδΣΫτͱΦϒδΣΫτͷ઀ଓ͸ TypeScript Ͱهड़


    ‣ কདྷతʹ͸։ൃͷεέʔϥϏϦςΟ୲อͷͨΊʹ GraphQL Federation ͱ͔ͨ͘͠ͳΓͦ͏


    ‣ ͱΓ͋͑ͣ1ՕॴʹೖΕͯΈͯݕূ


    - ΞʔΩςΫνϟʹେ͖ͳมߋΛೖΕΔͱ͖͸ఫୀՄೳʹ͓ͯ͘͠ͷ͕େ੾


    ‣ Node.js (TypeScript + GraphQL Nexus)


    - Go ΍ Rust ΋બ୒ࢶͱͯ͠͸͕͋ͬͨɺϦϑΝϨϯε࣮૷Ͱ͋Δ graphql-js Λ࢖͏͜ͱΛ༏ઌ


    - ͋ͱͰม͑ͨ͘ͳͬͯ΋ɺGraphQL ͷεΩʔϚ͕कΕ͍ͯΕ͹ͳΜͱ͔ͳΔ


    - Apollo Server ͳͲ͸ͱΓ͋͑ͣ࢖Θͳ͍ʢඞཁʹͳΓͦ͏ͳλΠϛϯάͰߟ͑Δʣ


    - Envelop ͸࢖͍͍ͨ https://www.envelop.dev/


    ‣ Resolver ಺Ͱ gRPC Λୟ͘


    - औಘܥ͸جຊతʹ DataLoader Λܦ༝͠ɺ͍ΘΏΔ N+1 ໰୊Λ๷͙


    - όοΫΤϯυ͕ FieldMask pattern ʹରԠ͍ͯ͠Δ৔߹ɺGraphQL ΫΤϦ͔Βݡ͘ FieldMask Λ૊ΈཱͯΔ


    ότϧ͍ͨ͠࿩Λฉ͖͍ͨɾٞ࿦͍ͨ͜͠ͱ͕͋Δਓ͸࿩Λฉ͖ʹདྷ͍ͯͩ͘͞ʂ


    ʢSpatial Chat ʹ΋͍·͢ʣ
    https://www.wantedly.com/projects/748998

    View Slide

  30. ©2021 Wantedly, Inc.
    ·ͱΊɾ·ͳͼ
    ‣ ٕज़ͷಋೖ͸ɺԿͷ໰୊Λղܾ͢Δͷ͕໨తͳͷ͔Λҙࣝ͠Α͏


    - ʮѱ͘ͳͬͨʂ΍ΊΔʂʯͰ͸ͳ͘ɺ݁ہʮԿΛղܾͨͯ͘͠ʯʮԿͱίϯϑϦΫτ͍ͯ͠Δͷ͔ʯΛߟ͑Δ


    ‣ ͱ͸͍͑ఫୀ͢Δ༐ؾ΋େࣄ


    - େ͖ͳٕज़ಋೖ͸ɺఫୀ͠΍͍͢Α͏ʹখ͘͢͢͞ΊΔͷ΋ϙΠϯτ


    - ࣮؀ڥͰಈ͔͞ͳ͍ͱΘ͔Βͳ͍͜ͱ΋͋Δ


    ‣ GraphQL (ͱ͍͏͔ API ٕज़શൠʣʹ͍ͭͯ৭Μͳਓͱٞ࿦͍ͨ͠Ͱ͢ʂͥͻདྷͯͶʂ

    View Slide