すばらしきGraphQLのSEKAIへようこそ

DroidKaigi 2018のスライドです

Transcript

1. ͢͹Β͖͠ GraphQLͷSEKAI΁Α͏ͦ͜ DroidKaigi 2018, day 2, 14:50-15:20 gfx at Bit Journey, Inc.
2. ࣗݾ঺հ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey, Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ৘ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰ͸ʮORMͷબͼํʯͰͨ͠
3. ࣗݾ঺հ
4. Kibela
5. Kibela Web API • GraphQLΛ࠾༻ • ಺෦APIͱͯ͠͸Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠΋࠾༻༧ఆ • 2018೥தʹ͸ެ։͍ͨ͠ • ϞόΠϧ༻API΋౰વGraphQL • ΞϓϦ͸React NativeͰ࣮૷༧ఆʢ༧ఆ͕஗Ε͓ͯΓະணखʣ
6. Agenda • SDD: Schema-Driven Developmentʹ͍ͭͯ • GraphQLͱ͸Կ͔ • GraphQL in Android • With Java / Kotlin • With React Native
7. SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏ଄ͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͠΍͍͢ • ΫϥΠΞϯταΠυ͸schemaͷมߋΛ௥͏͜ͱͰαʔ όʔαΠυͷ࢓༷มߋʹ௥ै͠΍͍͢ • Schema͔Βͷίʔυੜ੒Ͱܕ҆શͳίʔυΛॻ͚Δ
8. DroidKaigi 2018ͱSDD • Web APIͷSDDޚࡾՈ͕੎ἧ͍ʂʂ • ·ͩAPIఆٛ؅ཧͰফ໣ͯ͠ΔͷʁʙSwaggerΛ༻ ͍ͨେن໛ΞϓϦ࣌୅ͷAPIఆٛ؅ཧͱίʔυδΣ ωϨʔτʙ • gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ • ͢͹Β͖͠GraphQLͷSEKAI΁Α͏ͦ͜
9. yugui, 2018 ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ࿩ https://qiita.com/yugui/items/160737021d25d761b353 “ࣗ෼ͷ؅׋ྖҬ಺ʹดͨ͡σʔλߏ଄Ͱ͋Ε͹ɺ εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ ਐΊΔͷ΋͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘ ͸͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ ٛͱ͍͏੫ۚΛࢧ෷Θͳ͍ͱͦͷ෼ͷπέ͸Ͳ͜ ͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃ଍ͱ͔ɺͦ ͏͍͏΍ͭͰࢧ෷͏͜ͱʹͳΔɻ”
10. GraphQLͱ͸Կ͔
11. GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API࢓༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧ͸HTTP • ೝূ΍response bodyͷѹॖͳͲ͸HTTPʹ४ͣΔ • ಺෦APIͱͯ͠΋֎෦APIͱͯ͠΋༗ޮ
12. “ϦιʔεऔಘʹಛԽͨ͠Web API” • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ • Ϧιʔεߋ৽ܥ͸ϝιουΛఆٛͯ͠ݺͿײ ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτ͸গͳ ͍ • “ϦιʔεͷऔಘʹGraphQLΛ࢖ͬͯߋ৽͸ RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ΋͍ΔϨϕϧ
13. GitHubͷGraphQL APIΛ GaphiQLͰோΊΔ
14. GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API explorer • ิ׬͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞ಺ଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ࢖͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ
15. σϞ / movie
16. GraphQLͷ༷ࢠ with GitHub Ϩεϙϯε
    +40/ ϦΫΤετ
    (SBQI2-
17. GraphQLͷ༷ࢠ with GitHub
18. GraphQLͷ༷ࢠ with GitHub
19. GraphQLͷ༷ࢠ with GitHub
20. GraphQLͷ༷ࢠ with GitHub %#ΧϥϜͷ஋Ͱ͸ͳ͘
    Ճ޻ࡁΈͷϑΟʔϧυʂ
21. GraphQLͷ༷ࢠ with GitHub ϦΫΤετΛΈΕ͹
    Ϩεϙϯεͷߏ଄͕Θ͔Δʂ
22. GraphQLͷ༷ࢠ with GitHub υΩϡϝϯτϏϡʔΞ෇͖ʂ
23. GraphQLͷ༷ࢠ with GitHub SPPUʹఆٛ͞Ε͍ͯΔͷ͸େ఍ ͷ৔߹RVFSZͱNVUBUJPOͷΈ
24. GraphQLͷ༷ࢠ with GitHub ͜͜Ͱྫʹ࢖͍ͬͯΔ SFQPTJUPSZϑΟʔϧυ͸
    PXOFSͱOBNΛҾ਺ʹͱΓ 3FQPTJUPSZܕΛฦ͢ͱͷ͜ͱ
25. GraphQLͷ༷ࢠ with GitHub 3FQPTJUPSZܕͷৄࡉ ࣮૷͍ͯ͠ΔΠϯλʔϑΣΠε ଘࡏ͢ΔϑΟʔϧυ
26. ͜͜·Ͱͷ·ͱΊ • ϦΫΤετ͔ΒϨεϙϯεͷߏ଄͕෼͔Δ • ΞϓϦέʔγϣϯ͕ͦͷ৔ͰඞཁͳϑΟʔϧυ ͚ͩΛϦΫΤετ͢ΔͨΊ༨ܭͳܭࢉ͕ෆཁ • ͨͱ͑͹ઌͷྫͩͱ “descriptionHTML” ͸ ෆཁͳͱ͖͸ϦΫΤετ͠ͳ͍͜ͱͰαʔόʔ αΠυͰͷܭࢉΛ࡟ݮͰ͖Δ
27. ܕγεςϜ • جຊܕ + ഑ྻ + Ϋϥε + ΠϯλʔϑΣΠε • جຊܕ͸Int, Float, Boolean, String, ID • Ϋϥε͸෮਺ͷΠϯλʔϑΣΠεΛ࣮૷Ͱ͖Δ • ΠϯλʔϑΣΠε͸JavaͷͦΕͱ΄΅ಉ͡ • શͯͷܕ͸non-nullʹͰ͖Δ (e.g. String!)
28. Mutation • Ϧιʔεߋ৽ܥͷΫΤϦλΠϓ • ࣗ༝ʹ໊લΛ͚ͭΒΕΔͷͰɺRESTͷPOST/ PUT/PATH/DELETEͷ͜ͱ͸๨ΕͯΑ͍
29. Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ࢓༷Ͱ͋ ΔRelay Server Specificationͷ͜ͱ • GraphQLίΞʹෆ଍͢Δ෦෼Λิ׬͢Δ࢓ ༷ͳͷͰशಘඞਢ
30. Relay Connection • ϦιʔεϦετͷϖʔδϯάΛఆΊͨ࢓༷ • edges: ϦετͷεϥΠεΛද͢഑ྻ • node: Ϧετͷ1ཁૉ
31. ͳͥRelay Connection͕ඞཁ͔ • ϦετͷεϥΠεͰ͋Δ഑ྻΛฦ͍ͨ͠ • ೚ҙͷϝλσʔλΛฦ͍ͨ͠ • ͭ·Γੜͷ഑ྻΛฦ͢Θ͚ʹ͸͍͔ͳ͍ • ͦ͜Ͱ edges / node ͱ͍͏૚Λઃ͚ͨ
32. Relay Connection in GitHub WJFXFS
    
    DVSSFOU
    VTFS
    ͷ
    lQVCMJD
    SFQPTJUPSJFT͔Β࠷৽ͭ
    ͨͩ͠GPSLΛআ͘z
33. Relay Connection in GitHub ΧελϜϝλσʔλ
34. Relay Connection in GitHub ഑ྻʹؔͯ͠͸ΫΤϦͷߏ଄͔Β ࣗ໌Ͱ͸ͳ͍͕ʜ
35. Relay Connection in GitHub
36. Relay Connection in GitHub
37. ΫΤϦ͸खॻ͖ʁ • खॻ͠Ζͱ͍͏ઃܭҙਤΛόϦόϦײ͡Δ • ΫΤϦͷߏ଄͕Ϩεϙϯεͷߏ଄ΛܾΊΔ͔Β • ΑͬͯɺϨεϙϯεͷσʔλܕΛίʔυੜ੒͢ ΔͳΒΫΤϦ͸੩తͰͳ͚Ε͹ͳΒͳ͍ • GraphiQL͕͋Ε͹ۤͰ͸ͳ͍΋ͷͷཧ૝తʹ͸ ࢖͍׳ΕͨΤσΟλͰॻ͖͍͕ͨ…
38. ͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console • Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ࢓༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ࢓༷
39. GraphQL in Android
40. Apollo - GraphQL client • JS / Android / iOS ༻ͷApollo client͕͋Δ • Apollo for Android͸JavaΛ૝ఆ • ΫΤϦ͔ΒJavaίʔυΛੜ੒͢ΔϥΠϒϥϦ • ΫΤϦ͕ද͢σʔλߏ଄ͷΫϥεΛੜ੒͢Δ
41. ΫΤϦ͔ΒίʔυΛੜ੒͢Δ • ίʔυ͔ΒΫΤϦΛੜ੒͢ΔͷͰ͸ͳ͍ • OrmaͳͲͷORM͸ίʔυ͔ΒΫΤϦΛੜ ੒͕ͪ͠ • ͳͥͳΒɺΫϥεΛੜ੒͢ΔͨΊʹΫΤϦ͕ ੩తͰͳ͍ͱ͍͚ͳ͍͔Β
42. Apollo for Android ˣίʔυੜ੒
43. Apollo for Android • ΫΤϦ͝ͱʹΫϥε܈Λੜ੒͢Δ • ϦΫΤετΫϥε • ϨεϙϯεΫϥε • HTTP௨৴෦෼͸OkHttpʹґଘ
44. Apollo for Android • ͋·Γ࢖ͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL query͸ରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ৔߹ *.graphql ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮਺จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷ͸ϫϯνϟϯ ͋Γͦ͏
45. JavaScript / TypeScript • Relay • Apollo • ੜGraphQLͰ΋ී௨ʹ࢖͑Δ • Kibela (web) ͸ੜGraphQLͰ΍͍ͬͯΔ
46. Relay • “A JavaScript framework for building data- driven React applications” • σʔλͷྲྀΕ͸Fluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆ଍ͳ͘஌͍ͬͯΔͷ͸ͦͷview͚͔ͩͩΒ
47. Relayͷงғؾ
48. Relayͷงғؾ 3FBDU
    $PNQPOFOU
49. Relayͷงғؾ (SBQI2-ΫΤϦ
50. Relayͷงғؾ 3FMBZ2VSZ3FOEFSFSͷSFOEFSͰ
    σʔλ͔ΒW%0.Λߏஙͯ͠ฦ͢
51. Relay does not meet TypeScript • KibelaͰ͸͓ͦΒ͘Relay͸࢖Θͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β • ύονΛ౰ͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃ૝͸Α͍ͷ Ͱͦͷൃ૝͚ͩࢀߟʹ͢Δ
52. Ϟσϧ͸ʁ෗ഊ๷ࢭ૚͸ʁ • GraphQLΛ࢖͏ͱ͖͸ʮview component͕ඞཁͳ ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏ • Ϟσϧ΍෗ഊ๷ࢭ૚ͱ͍͏֓೦͸ෆཁͳͷͰ͸…ͱ ࢥ͍ͬͯΔ • ·ͩʮࣗ෼ͰAPIΛ։ൃ͠ͳ͕ΒviewΛ૊Ήʯ͜ ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷล͸ະ஌਺Ͱ͸͋Δ
53. εΩʔϚΛαόΫϥͰڞ༗ʁ • GraphQL API͸εΩʔϚΛΤϯυϙΠϯτͰε ΩʔϚΛฦ͢ • ίʔυੜ੒ʹ͸εΩʔϚ͕ඞཁͳͷͰɺϏϧυ ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ ͘Δ • ͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε͹ ։ൃ൛ͷར༻΋Մೳ
54. ଞͷWeb APIख๏΁ͷॴײ
55. vs RESTful API / Swagger • RESTful͸ݸਓతʹ͸ʮWeb APIΛແཧ΍Γ HTTPʹ৐͍ͤͯΔʯײ͕͋ͬͯͭΒ͍
56. vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮਺ͷҙຯΛ࣋ͨͤͨ݁Ռ࢖͍෺ʹͳΒͳ ͍͜ͱ͕͠͹͠͹ • OAuth scope͕଍Γͳ͍ͱ͖΍ϩάΠϯϢʔβͷݖݶ͕ͳ͍ͱ͖ʹ 403Λฦͨ͠Γ͢ΔͷͰ403Ͱ෼ذͨ͋͠ͱߋʹผͷ৘ใͰ෼ذ͕ඞཁ • ϦΫΤετͷඞਢύϥϝʔλͷෆ଍͸400? 404? 422? • ಉҰαʔϏε಺Ͱ͢Β౷Ұ͞Εͯͳ͍͜ͱ΋ • ϦόʔεϓϩΩγ͕502ͱ͔503Λฦ͢ • εςʔλείʔυʹAPIͷ࢓༷ͱͦΕҎ֎ͷ࢓༷͕ࠞࡏ͍ͯ͠Δ…
57. vs RESTful API / Swagger • GraphQL͸ʮGraphQLϨϕϧͰॲཧ͕੒ޭ͠ ͨΒ200ʯͰݻఆ͢Δ • Τϥʔίʔυ͸ϨεϙϯεͷerrorsϑΟʔϧυ Ͱදݱ͢Δ
58. vs RESTful API / Swagger OPU
    GPVOEͱͷ͜ͱ
59. vs RESTful API / Swagger • RESTͩͱ GET / POST / PUT / PATCH / DELETE ͚ͩͰશͯͷߋ৽ܥͷৼΔ෣͍Λද ݱ͠ͳ͍ͱ͍͚ͳ͍ • ʮϑΟʔϧυͷ࡟আʯ͸DELETE? PATCH? • GraphQLͷߋ৽ܥʢmutationʣ͸೚ҙͷ໊લ Λ͚ͭΒΕΔͷͰద੾ͳ໊લΛ͚ͭΕ͹Α͍
60. vs gRPC • ͜ͷ෦԰ͷ࣍ͷ࣌ؒͷςʔϚ͕gRPCͳͷͰৄ ͘͠͸ͦͪΒ΁ʂ • ൚༻ੑͷߴ͍RPCϥΠϒϥϦͰ࣮੷΋͋Δ • GraphQLͷΑ͏ͳʮ࠷খݶͷϦιʔεΛऔ ಘʯ͢Δͷ͕ऑ͍ҹ৅
61. ·ͱΊ • ಡΈ΍͍͢ΫΤϦ • ΫΤϦΛಡΊ͹Ϩεϙϯε͕͍͍ͩͨ෼͔Δ • ܕ҆શͳεΩʔϚ • nullable / non-null ΋όονϦ૊ΈࠐΈ
62. GraphQL͸͍͍ͧ