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

Transcript

1. 1.

   ͢͹Β͖͠ GraphQLͷSEKAI΁Α͏ͦ͜ DroidKaigi 2018, day 2, 14:50-15:20 gfx at Bit

   Journey, Inc.
2. 2.

   ࣗݾ঺հ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey,

   Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ৘ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰ͸ʮORMͷબͼํʯͰͨ͠
3. 3.

   ࣗݾ঺հ

4. 4.

   Kibela

5. 5.

   Kibela Web API • GraphQLΛ࠾༻ • ಺෦APIͱͯ͠͸Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠΋࠾༻༧ఆ •

   2018೥தʹ͸ެ։͍ͨ͠ • ϞόΠϧ༻API΋౰વGraphQL • ΞϓϦ͸React NativeͰ࣮૷༧ఆʢ༧ఆ͕஗Ε͓ͯΓະணखʣ
6. 6.

   Agenda • SDD: Schema-Driven Developmentʹ͍ͭͯ • GraphQLͱ͸Կ͔ • GraphQL in

   Android • With Java / Kotlin • With React Native
7. 7.

   SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏ଄ͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͠΍͍͢ •

   ΫϥΠΞϯταΠυ͸schemaͷมߋΛ௥͏͜ͱͰαʔ όʔαΠυͷ࢓༷มߋʹ௥ै͠΍͍͢ • Schema͔Βͷίʔυੜ੒Ͱܕ҆શͳίʔυΛॻ͚Δ
8. 8.

   DroidKaigi 2018ͱSDD • Web APIͷSDDޚࡾՈ͕੎ἧ͍ʂʂ • ·ͩAPIఆٛ؅ཧͰফ໣ͯ͠ΔͷʁʙSwaggerΛ༻ ͍ͨେن໛ΞϓϦ࣌୅ͷAPIఆٛ؅ཧͱίʔυδΣ ωϨʔτʙ •

   gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ • ͢͹Β͖͠GraphQLͷSEKAI΁Α͏ͦ͜
9. 9.

   yugui, 2018 ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ࿩ https://qiita.com/yugui/items/160737021d25d761b353 “ࣗ෼ͷ؅׋ྖҬ಺ʹดͨ͡σʔλߏ଄Ͱ͋Ε͹ɺ εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ ਐΊΔͷ΋͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘ ͸͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ ٛͱ͍͏੫ۚΛࢧ෷Θͳ͍ͱͦͷ෼ͷπέ͸Ͳ͜

   ͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃ଍ͱ͔ɺͦ ͏͍͏΍ͭͰࢧ෷͏͜ͱʹͳΔɻ”
10. 10.

    GraphQLͱ͸Կ͔

11. 11.

    GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API࢓༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧ͸HTTP

    • ೝূ΍response bodyͷѹॖͳͲ͸HTTPʹ४ͣΔ • ಺෦APIͱͯ͠΋֎෦APIͱͯ͠΋༗ޮ
12. 12.

    “ϦιʔεऔಘʹಛԽͨ͠Web API” • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ • Ϧιʔεߋ৽ܥ͸ϝιουΛఆٛͯ͠ݺͿײ ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτ͸গͳ ͍ • “ϦιʔεͷऔಘʹGraphQLΛ࢖ͬͯߋ৽͸

    RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ΋͍ΔϨϕϧ
13. 13.

    GitHubͷGraphQL APIΛ GaphiQLͰோΊΔ

14. 14.

    GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API

    explorer • ิ׬͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞ಺ଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ࢖͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ
15. 15.

    σϞ / movie

16. 16.

    GraphQLͷ༷ࢠ with GitHub Ϩεϙϯε
    +40/ ϦΫΤετ
    (SBQI2-

17. 17.

    GraphQLͷ༷ࢠ with GitHub

18. 18.

    GraphQLͷ༷ࢠ with GitHub

19. 19.

    GraphQLͷ༷ࢠ with GitHub

20. 20.

    GraphQLͷ༷ࢠ with GitHub %#ΧϥϜͷ஋Ͱ͸ͳ͘
    Ճ޻ࡁΈͷϑΟʔϧυʂ

21. 21.

    GraphQLͷ༷ࢠ with GitHub ϦΫΤετΛΈΕ͹
    Ϩεϙϯεͷߏ଄͕Θ͔Δʂ

22. 22.

    GraphQLͷ༷ࢠ with GitHub υΩϡϝϯτϏϡʔΞ෇͖ʂ

23. 23.

    GraphQLͷ༷ࢠ with GitHub SPPUʹఆٛ͞Ε͍ͯΔͷ͸େ఍ ͷ৔߹RVFSZͱNVUBUJPOͷΈ

24. 24.

    GraphQLͷ༷ࢠ with GitHub ͜͜Ͱྫʹ࢖͍ͬͯΔ SFQPTJUPSZϑΟʔϧυ͸
    PXOFSͱOBNΛҾ਺ʹͱΓ 3FQPTJUPSZܕΛฦ͢ͱͷ͜ͱ

25. 25.

    GraphQLͷ༷ࢠ with GitHub 3FQPTJUPSZܕͷৄࡉ ࣮૷͍ͯ͠ΔΠϯλʔϑΣΠε ଘࡏ͢ΔϑΟʔϧυ

26. 26.

    ͜͜·Ͱͷ·ͱΊ • ϦΫΤετ͔ΒϨεϙϯεͷߏ଄͕෼͔Δ • ΞϓϦέʔγϣϯ͕ͦͷ৔ͰඞཁͳϑΟʔϧυ ͚ͩΛϦΫΤετ͢ΔͨΊ༨ܭͳܭࢉ͕ෆཁ • ͨͱ͑͹ઌͷྫͩͱ “descriptionHTML” ͸

    ෆཁͳͱ͖͸ϦΫΤετ͠ͳ͍͜ͱͰαʔόʔ αΠυͰͷܭࢉΛ࡟ݮͰ͖Δ
27. 27.

    ܕγεςϜ • جຊܕ + ഑ྻ + Ϋϥε + ΠϯλʔϑΣΠε •

    جຊܕ͸Int, Float, Boolean, String, ID • Ϋϥε͸෮਺ͷΠϯλʔϑΣΠεΛ࣮૷Ͱ͖Δ • ΠϯλʔϑΣΠε͸JavaͷͦΕͱ΄΅ಉ͡ • શͯͷܕ͸non-nullʹͰ͖Δ (e.g. String!)
28. 28.

    Mutation • Ϧιʔεߋ৽ܥͷΫΤϦλΠϓ • ࣗ༝ʹ໊લΛ͚ͭΒΕΔͷͰɺRESTͷPOST/ PUT/PATH/DELETEͷ͜ͱ͸๨ΕͯΑ͍

29. 29.

    Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ࢓༷Ͱ͋ ΔRelay

    Server Specificationͷ͜ͱ • GraphQLίΞʹෆ଍͢Δ෦෼Λิ׬͢Δ࢓ ༷ͳͷͰशಘඞਢ
30. 30.

    Relay Connection • ϦιʔεϦετͷϖʔδϯάΛఆΊͨ࢓༷ • edges: ϦετͷεϥΠεΛද͢഑ྻ • node: Ϧετͷ1ཁૉ

31. 31.

    ͳͥRelay Connection͕ඞཁ͔ • ϦετͷεϥΠεͰ͋Δ഑ྻΛฦ͍ͨ͠ • ೚ҙͷϝλσʔλΛฦ͍ͨ͠ • ͭ·Γੜͷ഑ྻΛฦ͢Θ͚ʹ͸͍͔ͳ͍ • ͦ͜Ͱ

    edges / node ͱ͍͏૚Λઃ͚ͨ
32. 32.

    Relay Connection in GitHub WJFXFS
    
    DVSSFOU
    VTFS
    ͷ
    lQVCMJD
    SFQPTJUPSJFT͔Β࠷৽ͭ
    ͨͩ͠GPSLΛআ͘z

33. 33.

    Relay Connection in GitHub ΧελϜϝλσʔλ

34. 34.

    Relay Connection in GitHub ഑ྻʹؔͯ͠͸ΫΤϦͷߏ଄͔Β ࣗ໌Ͱ͸ͳ͍͕ʜ

35. 35.

    Relay Connection in GitHub

36. 36.

    Relay Connection in GitHub

37. 37.

    ΫΤϦ͸खॻ͖ʁ • खॻ͠Ζͱ͍͏ઃܭҙਤΛόϦόϦײ͡Δ • ΫΤϦͷߏ଄͕Ϩεϙϯεͷߏ଄ΛܾΊΔ͔Β • ΑͬͯɺϨεϙϯεͷσʔλܕΛίʔυੜ੒͢ ΔͳΒΫΤϦ͸੩తͰͳ͚Ε͹ͳΒͳ͍ • GraphiQL͕͋Ε͹ۤͰ͸ͳ͍΋ͷͷཧ૝తʹ͸

    ࢖͍׳ΕͨΤσΟλͰॻ͖͍͕ͨ…
38. 38.

    ͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console •

    Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ࢓༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ࢓༷
39. 39.

    GraphQL in Android

40. 40.

    Apollo - GraphQL client • JS / Android / iOS

    ༻ͷApollo client͕͋Δ • Apollo for Android͸JavaΛ૝ఆ • ΫΤϦ͔ΒJavaίʔυΛੜ੒͢ΔϥΠϒϥϦ • ΫΤϦ͕ද͢σʔλߏ଄ͷΫϥεΛੜ੒͢Δ
41. 41.

    ΫΤϦ͔ΒίʔυΛੜ੒͢Δ • ίʔυ͔ΒΫΤϦΛੜ੒͢ΔͷͰ͸ͳ͍ • OrmaͳͲͷORM͸ίʔυ͔ΒΫΤϦΛੜ ੒͕ͪ͠ • ͳͥͳΒɺΫϥεΛੜ੒͢ΔͨΊʹΫΤϦ͕ ੩తͰͳ͍ͱ͍͚ͳ͍͔Β

42. 42.

    Apollo for Android ˣίʔυੜ੒

43. 43.

    Apollo for Android • ΫΤϦ͝ͱʹΫϥε܈Λੜ੒͢Δ • ϦΫΤετΫϥε • ϨεϙϯεΫϥε •

    HTTP௨৴෦෼͸OkHttpʹґଘ
44. 44.

    Apollo for Android • ͋·Γ࢖ͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL query͸ରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ৔߹ *.graphql

    ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮਺จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷ͸ϫϯνϟϯ ͋Γͦ͏
45. 45.

    JavaScript / TypeScript • Relay • Apollo • ੜGraphQLͰ΋ී௨ʹ࢖͑Δ •

    Kibela (web) ͸ੜGraphQLͰ΍͍ͬͯΔ
46. 46.

    Relay • “A JavaScript framework for building data- driven React

    applications” • σʔλͷྲྀΕ͸Fluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆ଍ͳ͘஌͍ͬͯΔͷ͸ͦͷview͚͔ͩͩΒ
47. 47.

    Relayͷงғؾ

48. 48.

    Relayͷงғؾ 3FBDU
    $PNQPOFOU

49. 49.

    Relayͷงғؾ (SBQI2-ΫΤϦ

50. 50.

    Relayͷงғؾ 3FMBZ2VSZ3FOEFSFSͷSFOEFSͰ
    σʔλ͔ΒW%0.Λߏஙͯ͠ฦ͢

51. 51.

    Relay does not meet TypeScript • KibelaͰ͸͓ͦΒ͘Relay͸࢖Θͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β •

    ύονΛ౰ͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃ૝͸Α͍ͷ Ͱͦͷൃ૝͚ͩࢀߟʹ͢Δ
52. 52.

    Ϟσϧ͸ʁ෗ഊ๷ࢭ૚͸ʁ • GraphQLΛ࢖͏ͱ͖͸ʮview component͕ඞཁͳ ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏ • Ϟσϧ΍෗ഊ๷ࢭ૚ͱ͍͏֓೦͸ෆཁͳͷͰ͸…ͱ ࢥ͍ͬͯΔ •

    ·ͩʮࣗ෼ͰAPIΛ։ൃ͠ͳ͕ΒviewΛ૊Ήʯ͜ ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷล͸ະ஌਺Ͱ͸͋Δ
53. 53.

    εΩʔϚΛαόΫϥͰڞ༗ʁ • GraphQL API͸εΩʔϚΛΤϯυϙΠϯτͰε ΩʔϚΛฦ͢ • ίʔυੜ੒ʹ͸εΩʔϚ͕ඞཁͳͷͰɺϏϧυ ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ ͘Δ •

    ͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε͹ ։ൃ൛ͷར༻΋Մೳ
54. 54.

    ଞͷWeb APIख๏΁ͷॴײ

55. 55.

    vs RESTful API / Swagger • RESTful͸ݸਓతʹ͸ʮWeb APIΛແཧ΍Γ HTTPʹ৐͍ͤͯΔʯײ͕͋ͬͯͭΒ͍

56. 56.

    vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮਺ͷҙຯΛ࣋ͨͤͨ݁Ռ࢖͍෺ʹͳΒͳ ͍͜ͱ͕͠͹͠͹ • OAuth

    scope͕଍Γͳ͍ͱ͖΍ϩάΠϯϢʔβͷݖݶ͕ͳ͍ͱ͖ʹ 403Λฦͨ͠Γ͢ΔͷͰ403Ͱ෼ذͨ͋͠ͱߋʹผͷ৘ใͰ෼ذ͕ඞཁ • ϦΫΤετͷඞਢύϥϝʔλͷෆ଍͸400? 404? 422? • ಉҰαʔϏε಺Ͱ͢Β౷Ұ͞Εͯͳ͍͜ͱ΋ • ϦόʔεϓϩΩγ͕502ͱ͔503Λฦ͢ • εςʔλείʔυʹAPIͷ࢓༷ͱͦΕҎ֎ͷ࢓༷͕ࠞࡏ͍ͯ͠Δ…
57. 57.

    vs RESTful API / Swagger • GraphQL͸ʮGraphQLϨϕϧͰॲཧ͕੒ޭ͠ ͨΒ200ʯͰݻఆ͢Δ • Τϥʔίʔυ͸ϨεϙϯεͷerrorsϑΟʔϧυ

    Ͱදݱ͢Δ
58. 58.

    vs RESTful API / Swagger OPU
    GPVOEͱͷ͜ͱ

59. 59.

    vs RESTful API / Swagger • RESTͩͱ GET / POST

    / PUT / PATCH / DELETE ͚ͩͰશͯͷߋ৽ܥͷৼΔ෣͍Λද ݱ͠ͳ͍ͱ͍͚ͳ͍ • ʮϑΟʔϧυͷ࡟আʯ͸DELETE? PATCH? • GraphQLͷߋ৽ܥʢmutationʣ͸೚ҙͷ໊લ Λ͚ͭΒΕΔͷͰద੾ͳ໊લΛ͚ͭΕ͹Α͍
60. 60.

    vs gRPC • ͜ͷ෦԰ͷ࣍ͷ࣌ؒͷςʔϚ͕gRPCͳͷͰৄ ͘͠͸ͦͪΒ΁ʂ • ൚༻ੑͷߴ͍RPCϥΠϒϥϦͰ࣮੷΋͋Δ • GraphQLͷΑ͏ͳʮ࠷খݶͷϦιʔεΛऔ ಘʯ͢Δͷ͕ऑ͍ҹ৅

61. 61.

    ·ͱΊ • ಡΈ΍͍͢ΫΤϦ • ΫΤϦΛಡΊ͹Ϩεϙϯε͕͍͍ͩͨ෼͔Δ • ܕ҆શͳεΩʔϚ • nullable /

    non-null ΋όονϦ૊ΈࠐΈ
62. 62.

    GraphQL͸͍͍ͧ