Tweet
Tweet

Slide 1

Slide 1 text

७ਮഓཆGraphQL @qsona 2020-08-28 GraphQL Tokyo #10

Slide 2

Slide 2 text

whoami • @qsona • Web Engineer at Quipper Ltd • Microservices / Rails / Node.js / GraphQL

Slide 3

Slide 3 text

લฤ: ৽نαʔϏε։ൃʹ͓͍ͯ બఆͨ͠ΞʔΩςΫνϟɾ
 ͦͷબఆཧ༝

Slide 4

Slide 4 text

Զͨͪͷ৽نαʔϏε։ൃ • ࡞Δ΋ͷ: App (iOS/Android, Ұ෦ WebView) / Backend • (ৄࡉ͸·ͩඇެ։) • ن໛ • Backend & Web Frontend devs: 6ਓ • Native devs: ~8ਓ͘Β͍ • ظؒ: > 1೥

Slide 5

Slide 5 text

ΞʔΩςΫνϟ (Phase 1)

Slide 6

Slide 6 text

ΞʔΩςΫνϟ (Phase 2)

Slide 7

Slide 7 text

શൠతʹ GraphQL • શͯͷ API ʹ GraphQL Λར༻͍ͯ͠Δ • Client - Gateway • Gateway - Backend • Backend - Backend • ७ਮഓཆ GraphQL ͱͰ΋ݺΜͰ͓͜͏

Slide 8

Slide 8 text

ୡ੒͔ͨͬͨ͜͠ͱ • ॳख͔ΒαʔϏε෼ׂ (Microservices) • Schema-driven development • Backend ͸ Resource-based API Λอͭ

Slide 9

Slide 9 text

(1) ॳख͔ΒαʔϏε෼ׂ (Microservices) • ৽ن "αʔϏε" ։ൃ ͕ͩɺ
 ׬શʹ৽ن"ࣄۀ"Ͱ͸ͳ͍ • جຊతʹྑ͘஌͍ͬͯΔυϝΠϯͰɺ
 ίϯςΩετͱͦͷڥք͕ݟ͍͑ͯΔ • ͦͷڥքʹԊͬͨద੾ͳαʔϏε෼ׂΛ
 ॳख͔Β΍͓͖͍ͬͯͨ

Slide 10

Slide 10 text

(1) ॳख͔ΒαʔϏε෼ׂ (Microservices) Microservices ߏ੒ʹ͢ΔͨΊʹ... • API Gateway ·ͨ͸ BFF (Backends for Frontends) ͷ૚͕ඞཁ • (͜ͷ2ͭͷҧ͍͸ॾઆ͋Δ͕ɺݸਓతͳ੔ཧͱͯ͠͸...)
 API Gateway: جຊతʹϏδωεϩδοΫΛॻ͔ͳ͍ɻόοΫΤϯυΤϯδχΞ͕։ൃ͢Δͷ͕Ұൠతɻ
 BFF: ΫϥΠΞϯτͷͨΊͷϏδωεϩδοΫΛॻ͘ɻΫϥΠΞϯτΤϯδχΞ͕։ൃ͢ΔͷΛਪ঑ɻ • αʔϏεؒͷAPI࿈ܞ͕ඞཁ

Slide 11

Slide 11 text

(1) => ΞʔΩςΫνϟͱͷରԠ • API Gateway ύλʔϯΛ࠾༻ • ͢΂ͯΛGraphQLʹ͢Δ͜ͱͰɺΠϯςάϨʔγϣϯΛ௿ίετʹ • => ޙ൒ͰਂೖΓ͢Δ • αʔϏεؒ௨৴΋ GraphQL Λར༻ • ݱࡏ͸ Ruby on Rails => Node.js ͷΞΫηε • ॴײ: ͭͳ͗͜Έ͕͔ͳΓ҆ఆ͢Δ

Slide 12

Slide 12 text

(2) Schema-driven development • GraphQL Schema Λத৺ʹɺ։ൃϑϩʔΛਐΊΔ • ๬֎ʹ͏·͍ͬͯ͘Δ • νʔϜͷΞδϦςΟΛ
 ߴΊΔޮՌ΋

Slide 13

Slide 13 text

(3) Backend ͸ Resource-based API Λอͭ • ஫: ࡉ͔͗͢ΔϦιʔε΍ɺ
 ςʔϒϧ୯ҐͷϦιʔεΛఏڙ͢Δͱ͍͏ҙຯͰ͸ͳ͍ • Ϧιʔεͷཻ౓ͷߟ࡯͸ඞཁ • ݸผͷ Usecase ͝ͱͷରԠΛ
 ͳΔ΂ͨ͘͘͠ͳ͍

Slide 14

Slide 14 text

(3) Backend ͸ Resource-based API Λอͭ • GraphQL ͷ࠾༻ʹΑΓɺ
 Usecase-based API ͱͷྑ͍ͱ͜ΖऔΓ͕Ͱ͖Δ • ؆୯ʹݴ͏ͱ...
 Schema શମ͕ Resource Λද͠
 Query ͕ Usecase Λද͢ • ৄ͘͠͸ӈͷࢿྉΛݟͯͶ!!

Slide 15

Slide 15 text

ଞͷΞʔΩςΫνϟͱͷൺֱ • ७ਮഓཆ͡Όͳ͍GraphQLύλʔϯͱൺֱͯ͠ΈΔ • (a) GraphQL Gateway - REST/gRPC ύλʔϯ • (b) BFF (RPC) - GraphQL ύλʔϯ

Slide 16

Slide 16 text

ଞͷΞʔΩςΫνϟͱͷൺֱ (a) GraphQL Gateway - REST/gRPC ύλʔϯ

Slide 17

Slide 17 text

ଞͷΞʔΩςΫνϟͱͷൺֱ (a) GraphQL Gateway - REST/gRPC ύλʔϯ • ࢲݟ: Α΄Ͳͷཧ༝͕ͳ͚Ε͹
 ৽نαʔϏεͰબ୒͢Δཧ༝͕ͳ͍ • Cons • Gateway Ͱϓϩτίϧม׵͢Δͷ͕໘౗ • ݁ہɺ͋Δఔ౓͸
 Backend ͕ Usecase API Λ࡞Δඞཁ͕ग़ͯ͘Δ

Slide 18

Slide 18 text

ଞͷΞʔΩςΫνϟͱͷൺֱ (b) BFF (RPC) - GraphQL ύλʔϯ

Slide 19

Slide 19 text

ଞͷΞʔΩςΫνϟͱͷൺֱ (b) BFF (RPC) - GraphQL ύλʔϯ • ے͕ྑ͍ͱࢥ͍ͬͯΔ • Backend ͸ Resource-based API Λ࡞Γɺ
 Ϣʔεέʔε͔Βղ์͞ΕΔ • Client ͸ࣗ෼ͨͪͷϢʔεέʔεΛBFFʹ࣮૷Ͱ͖Δ • ࠓճ BFF Λ࠾༻͠ͳ͔ͬͨཧ༝ • ΫϥΠΞϯτ΋όοΫΤϯυ΋ಉ͡νʔϜͰ։ൃ͍ͯ͘͠ͷͰɺ
 ม׵͢Δ૚͕ͦ͜·ͰඞཁʹͳΒͳ͍

Slide 20

Slide 20 text

ޙฤ: GraphQL Gateway ͷ ໾ׂɾ࣮ݱํ๏

Slide 21

Slide 21 text

GraphQL Gateway ͷ໾ׂ • schema Λ merge ͢Δ • Backend ͷෳ਺ͷ GraphQL Schema Λ·ͱΊͯදग़͠ɺ
 ϦΫΤετ͕དྷͨΒΫΤϦΛ෼ղͯ͠ޙΖʹྲྀ͢ • (SQLతͳҙຯͷ) join ͢Δ • ΫϥΠΞϯτ޲͚ͷͪΐͬͱͨ͠ϩδοΫ • ೝূ / ͦͷଞ API Gateway ҰൠʹٻΊΒΕΔ໾ׂ

Slide 22

Slide 22 text

GraphQL Gateway ͷ໾ׂ - merge Backends Gateway

Slide 23

Slide 23 text

GraphQL Gateway ͷ໾ׂ - merge Backends Gateway merged schema

Slide 24

Slide 24 text

GraphQL Gateway ͷ໾ׂ - merge Backends Gateway

Slide 25

Slide 25 text

GraphQL Gateway ͷ໾ׂ - join Backends Gateway ^ ͜͜ʹ author: User! Λ௥Ճ͢Δ

Slide 26

Slide 26 text

GraphQL Gateway ͷ࣮૷ख๏ • Schema stitching (ݱࡏར༻த) • Apollo Federation • GraphQL Mesh

Slide 27

Slide 27 text

Schema stitching ͷػೳ • mergeSchema • delegateSchema • join ʹ࢖͑Δ (Ұखؒͷ࣮૷͕ඞཁ) • transformSchema • Schema ΛมߋͰ͖Δ (ϦωʔϜͳͲ)

Slide 28

Slide 28 text

Schema stitching merge schema join

Slide 29

Slide 29 text

Schema stitching ͷӡ༻ྫ

Slide 30

Slide 30 text

Apollo Federation ࣮૷ - backends ଞαʔϏεͷSchemaΛ֦ுͯ͠ɺ ࣗαʔϏεʹؔ࿈͢ΔfieldΛੜ΍͍ͯ͠Δ

Slide 31

Slide 31 text

Apollo Federation ࣮૷ - gateway શͯͷ৘ใ͸ Backend schema ʹ͋ΔͷͰɺ Gateway ͸ͨͩಡΈࠐΉ͚ͩ

Slide 32

Slide 32 text

Apollo Federation • Schema stitching ͱͷҧ͍ • Schema stitching ͸ Gateway server ͕ओମతʹू໿͍ͯ͘͠ • Federation ͸ ֤ Backend servers ʹએݴతʹɺ
 ू໿ͷ৘ใΛશͯهड़͢Δ

Slide 33

Slide 33 text

GraphQL Mesh • GraphQL API ͚ͩͰͳ͘ɺRESTful (OpenAPI) ΍ gRPC ͳͲ΋ ू໿͢Δ͜ͱ͕Ͱ͖Δ • (࣌ؒͷؔ܎Ͱলུ)

Slide 34

Slide 34 text

Mesh ͷҙຯ • Schema stitching ͸͋͘·Ͱ࣮૷Ͱ͋Δɻ • Federation / GraphQL Mesh ͸ɺू໿ͷํ๏ͷએݴͰ͋Γɺ Gateway Server ͕ඞਢͰ͸ͳ͍ • Service to Service ͷ৔߹͸ɺ௚઀ෳ਺αʔϏεΛୟ͍ͯू໿ Ͱ͖Δɻ

Slide 35

Slide 35 text

Զͨͪͷ৽نαʔϏεʹ͓͚Δ༧ఆ • ͜Ε·Ͱ ... Schema stitching Ͱ࣮૷ΛਐΊͨ • ࣍ͷ൒ظ ... Apollo Federation ͷௐࠪͱಋೖΛ͍ͨ͠ • ͞Βʹ࣍ͷ൒ظ ...
 طଘͷ RESTful / gRPC API ͱ΋ܨ͗͜ΜͰ͍͘
 => GraphQL Mesh ΛτϥΠͯ͠Έ͍ͨ

Slide 36

Slide 36 text

Thank you for listening! • We're hiring! • ొ৔ͨ͠ϦϯΫ͸ Speaker Deck ͷ֓ཁཝʹ
 ͢΂ͯࡌ͓͖ͤͯ·͢