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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

©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ʹͳͬͯͨ

Slide 3

Slide 3 text

Slide 4

Slide 4 text

©2021 Wantedly, Inc. JavaScript and Wantedly όοΫΤϯυͰ΋Ұ෦ར༻   ʢQVQQFUFFSʹΑΔը૾ੜ੒ͳͲʣ ੈ୅ʹ෼͔Ε͍ͯΔ͕ɺ࠷৽ͷ΋ͷ͸/FYUKTʹҠߦ   👉 IUUQTEPDTXBOUFEMZEFW fi FMETBQQMJDBUJPOGSPOUFOEBSDIJUFDUVSF https://speakerdeck.com/wantedly/for-engineers?slide=22

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

©2021 Wantedly, Inc. GraphQL and Wantedly ࠷ॳͷ GraphQL ಋೖ ‣ 2019೥͸͡Ί͝ΖͰɺWantedly Visit ͷاۀଆը໘ʹಋೖͨ͠ͷ͕࠷ॳ ‣ Web Frontend ʹ͓͚Δ՝୊Λղܾ͢ΔͨΊʹಋೖ - Web Frontend Ͱܕ෇͖ͷεΩʔϚͰɺੜ࢈ੑߴ͘։ൃ͍ͨ͠ - ෳ਺ϚΠΫϩαʔϏε͔ΒͷσʔλΛू໿͠ɺϑϩϯτΤϯυͰ࢖͍΍͍͢ܗʹม׵͍ͨ͠ ‣ ͍ΘΏΔ “BFF” తͳ࢖ΘΕํ - ϑϩϯτΤϯυدΓͷ։ൃऀ͕εΩʔϚઃܭɾ࣮૷Λ͓͜ͳ͏ - ʢϞόΠϧͰ࢖ͬͯͳ͔ͬͨͷ͸ɺ୯७ʹݕূͰ͖ͯͳ͔ͬͨͷ΋͋Δʣ

Slide 9

Slide 9 text

Slide 10

Slide 10 text

©2021 Wantedly, Inc. GraphQL and Wantedly ৼΓฦΓ - ࠷ॳͷ GraphQL ಋೖ ‣ Web Frontend ʹ͓͚Δੜ࢈ੑ͸͔֬ʹ޲্ͨ͠ - εΩʔϚ͔Βਖ਼͍͠ܕ͕ੜ੒͞Εͯศར - ঢ়ଶ؅ཧ΋ Apollo Client ʹ೚ͤΔ͜ͱ͕Ͱ͖ͨ ‣ ҰํͰɺΞʔΩςΫνϟશମͱͯ͠࠷దͳܗʹͳ͔ͬͨ͸ผ ‣ Wantedly People(mobile app), Pro fi le ଆͷνʔϜ͕ BFF Λར༻͢Δͱ͖ʹ໰୊͕ݦࡏԽͨ͠

Slide 11

Slide 11 text

©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

Slide 12

Slide 12 text

©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 ʹΑΔεΩʔϚۦಈ։ൃ

Slide 13

Slide 13 text

Slide 14

Slide 14 text

©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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

©2021 Wantedly, Inc. Mobile app gRPC server microservice JSON / HTTP Protobuf / gRPC grpc-gateway microservice GraphQL server microservice microservice Web Frontend ͦ΋ͦ΋… ‣ GraphQL ಋೖͷେ͖ͳϝϦοτͱͯ͋ͬͨ͠ͷ͸… - ʮ ܕͷ͋ΔεΩʔϚͱ͔ͦ͜Βͷ࣮૷ͷੜ੒ʯ ‣ Protobuf Λར༻͢Ε͹ɺࣅͨΑ͏ͳ͜ͱ͸Ͱ͖ͯ͠·͏

Slide 17

Slide 17 text

Slide 18

Slide 18 text

©2021 Wantedly, Inc. Reconsider “GraphQL” GraphQL ΛೖΕΔ໨తΛ࠶ߟ͢Δ ‣ GraphQL ͷϝϦοτ࠶ߟ - ܕͷ͋ΔεΩʔϚͱɺ͔ͦ͜Βͷίʔυੜ੒ - ϑΟʔϧυɾؔ࿈ΦϒδΣΫτΛબ୒తʹɾॊೈʹऔಘͰ͖ΔΠϯλϑΣʔε - σʔλܗࣜɾ௨৴ํࣜͱ΋ʹҰൠతͳϑΥʔϚοτʢJSON over HTTPʣͳͷͰɺͲ͜Ͱ΋ಈ͘ ‣ Wantedly ͰकΓ͍ͨͱ͜Ζ - όοΫΤϯυͷγεςϜؒ௨৴Ͱ΋εΩʔϚۦಈ։ൃ͍ͨ͠ʢطଘͷࢿ࢈Λ࢖͍͍ͨͷͰɺgRPC ࢖͍͍ͨʣ - 1ͭͷεΩʔϚΛઈରతͳιʔεͱͯ͠ѻ͍͍ͨ Protobuf IDL Ͱهड़͞ΕͨεΩʔϚʹ͸υϝΠϯ஌͕ࣝ൓ө͞Ε͍ͯΔ υΩϡϝϯτ͕ࣗવݴޠͰ΋هड़͞Ε͍ͯΔ wantedly/apis ͱ͍͏ϦϙδτϦͰதԝ؅ཧ͞Ε͓ͯΓɺ ͔ͦ͜Β֤ݴޠ࣮૷͕ࣗಈੜ੒͞ΕΔ ͜ͷϦϙδτϦʹ͋ΒΏΔ஌͕ࣝूੵ͞ΕɺϓϩμΫτ։ൃΛՃ଎͍ͤͯ͞Δ ʢৄ͘͠͸ʮProtocol Buffers ʹΑΔϓϩμΫτ։ൃͷεεϝ - API ։ൃͷࠓੲ - | Wantedly Engineer BlogʯΛࢀরʣ ʢ…ͷͰɺεΩʔϚ̎ॏ؅ཧʹΑΓ৴པੑ͕طଘ͞ΕΔͷ͸ࠔΔʣ

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

©2021 Wantedly, Inc. Wantedly ͷϓϩμΫτੑ࣭ https://speakerdeck.com/wantedly/for-engineers?slide=22 ‣ Web ͱϞόΠϧͰυϝΠϯઃܭ͸ಉ͡ - ϓϩμΫτΛލ͍Ͱ΋ʢڞ௨෦෼͸ʣಉ͡ ‣ ΞϓϦɾػೳʹΑͬͯ৘ใྔͷଟՉ͕͋Δ - e.g. ϢʔβଆϓϩϑΟʔϧͱاۀଆϓϩϑΟʔϧʢεΧ΢τૹΔͱ ͖ʹݟΔ΍ͭʣ͸৘ใྔ͕ҧ͏

Slide 22

Slide 22 text

©2021 Wantedly, Inc. Reconsider “GraphQL” GraphQL ΛೖΕΔ໨తΛ࠶ߟ͢Δ ‣ GraphQL ͷϝϦοτ࠶ߟ • ܕͷ͋ΔεΩʔϚͱɺ͔ͦ͜Βͷίʔυੜ੒ - ϑΟʔϧυɾؔ࿈ΦϒδΣΫτΛબ୒తʹɾॊೈʹऔಘͰ͖ΔΠϯλϑΣʔε - σʔλܗࣜɾ௨৴ํࣜͱ΋ʹҰൠతͳϑΥʔϚοτʢJSON over HTTPʣͳͷͰɺͲ͜Ͱ΋ಈ͘ ‣ Wantedly ͰकΓ͍ͨͱ͜Ζ • όοΫΤϯυͷγεςϜؒ௨৴Ͱ΋εΩʔϚۦಈ։ൃ͍ͨ͠ʢطଘͷࢿ࢈Λ࢖͍͍ͨͷͰɺgRPC ࢖͍͍ͨʣ • 1ͭͷεΩʔϚΛઈରతͳιʔεͱͯ͠ѻ͍͍ͨ

Slide 23

Slide 23 text

Slide 24

Slide 24 text

©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 Λྔ࢈͢ΔίετΛݮΒ͢ ʢ͋Δ͍͸ɺෆཁͳϑΟʔϧυΛऔಘͯ͠༨ܭͳϨΠςϯγ͕ൃੜ͢ΔͷΛ๷͙ʣ

Slide 25

Slide 25 text

©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 Λ஫ೖ͢Δॲཧͱ͔ॻ͖͕͚ͪͩͲɺ ͦΕΛ͠ͳͯ͘ྑ͘ͳΔʣ

Slide 26

Slide 26 text

©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 ࣮૷ͷίετΛݮΒ͢

Slide 27

Slide 27 text

©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 Λ૊ΈཱͯΔ

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

©2021 Wantedly, Inc. ·ͱΊɾ·ͳͼ ‣ ٕज़ͷಋೖ͸ɺԿͷ໰୊Λղܾ͢Δͷ͕໨తͳͷ͔Λҙࣝ͠Α͏ - ʮѱ͘ͳͬͨʂ΍ΊΔʂʯͰ͸ͳ͘ɺ݁ہʮԿΛղܾͨͯ͘͠ʯʮԿͱίϯϑϦΫτ͍ͯ͠Δͷ͔ʯΛߟ͑Δ ‣ ͱ͸͍͑ఫୀ͢Δ༐ؾ΋େࣄ - େ͖ͳٕज़ಋೖ͸ɺఫୀ͠΍͍͢Α͏ʹখ͘͢͢͞ΊΔͷ΋ϙΠϯτ - ࣮؀ڥͰಈ͔͞ͳ͍ͱΘ͔Βͳ͍͜ͱ΋͋Δ ‣ GraphQL (ͱ͍͏͔ API ٕज़શൠʣʹ͍ͭͯ৭Μͳਓͱٞ࿦͍ͨ͠Ͱ͢ʂͥͻདྷͯͶʂ