Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

FUJI Goro
February 09, 2018

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

DroidKaigi 2018のスライドです

FUJI Goro

February 09, 2018
Tweet

More Decks by FUJI Goro

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ࣗݾ঺հ
    • ໊લ: gfx (FUJI Goro)
    • ॴଐ: Bit Journey, Inc.
    • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela
    • ৘ใڞ༗πʔϧ / Wiki
    • લճͷDroidKaigiͰ͸ʮORMͷબͼํʯͰͨ͠

    View full-size slide

  3. Kibela Web API
    • GraphQLΛ࠾༻
    • ಺෦APIͱͯ͠͸Ұ෦ಋೖࡁΈ
    • ެ։༻APIͱͯ͠΋࠾༻༧ఆ
    • 2018೥தʹ͸ެ։͍ͨ͠
    • ϞόΠϧ༻API΋౰વGraphQL
    • ΞϓϦ͸React NativeͰ࣮૷༧ఆʢ༧ఆ͕஗Ε͓ͯΓະணखʣ

    View full-size slide

  4. Agenda
    • SDD: Schema-Driven Developmentʹ͍ͭͯ
    • GraphQLͱ͸Կ͔
    • GraphQL in Android
    • With Java / Kotlin
    • With React Native

    View full-size slide

  5. SDD: Schema-Driven Development
    • SchemaʢʹAPIͱσʔλߏ଄ͷఆٛʣͱϩδοΫͷ։
    ൃΛಉ࣌ʹਐΊΔ͜ͱ
    • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε
    ʹίϛϡχέʔγϣϯ͠΍͍͢
    • ΫϥΠΞϯταΠυ͸schemaͷมߋΛ௥͏͜ͱͰαʔ
    όʔαΠυͷ࢓༷มߋʹ௥ै͠΍͍͢
    • Schema͔Βͷίʔυੜ੒Ͱܕ҆શͳίʔυΛॻ͚Δ

    View full-size slide

  6. DroidKaigi 2018ͱSDD
    • Web APIͷSDDޚࡾՈ͕੎ἧ͍ʂʂ
    • ·ͩAPIఆٛ؅ཧͰফ໣ͯ͠ΔͷʁʙSwaggerΛ༻
    ͍ͨେن໛ΞϓϦ࣌୅ͷAPIఆٛ؅ཧͱίʔυδΣ
    ωϨʔτʙ
    • gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ
    • ͢͹Β͖͠GraphQLͷSEKAI΁Α͏ͦ͜

    View full-size slide

  7. yugui, 2018
    ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ࿩
    https://qiita.com/yugui/items/160737021d25d761b353
    “ࣗ෼ͷ؅׋ྖҬ಺ʹดͨ͡σʔλߏ଄Ͱ͋Ε͹ɺ
    εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ
    ਐΊΔͷ΋͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘
    ͸͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ
    ٛͱ͍͏੫ۚΛࢧ෷Θͳ͍ͱͦͷ෼ͷπέ͸Ͳ͜
    ͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ
    ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃ଍ͱ͔ɺͦ
    ͏͍͏΍ͭͰࢧ෷͏͜ͱʹͳΔɻ”

    View full-size slide

  8. GraphQLͱ͸Կ͔

    View full-size slide

  9. GraphQLʹ͍ͭͯ
    • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ
    • ϦιʔεऔಘʹಛԽͨ͠Web API࢓༷ͱ͍͑Δ
    • Web API ͳͷͰ௨৴ϓϩτίϧ͸HTTP
    • ೝূ΍response bodyͷѹॖͳͲ͸HTTPʹ४ͣΔ
    • ಺෦APIͱͯ͠΋֎෦APIͱͯ͠΋༗ޮ

    View full-size slide

  10. “ϦιʔεऔಘʹಛԽͨ͠Web API”
    • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ
    • Ϧιʔεߋ৽ܥ͸ϝιουΛఆٛͯ͠ݺͿײ
    ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτ͸গͳ
    ͍
    • “ϦιʔεͷऔಘʹGraphQLΛ࢖ͬͯߋ৽͸
    RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ΋͍ΔϨϕϧ

    View full-size slide

  11. GitHubͷGraphQL APIΛ
    GaphiQLͰோΊΔ

    View full-size slide

  12. GraphiQLʢάϥϑΟΫϧʣ
    • The GraphQL IDE
    • ཁ͢ΔʹAPI console / API explorer
    • ิ׬͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞ಺ଂ
    • GraphiQL͕͋Δ͔ΒGraphQLΛ࢖͏ͱ͍͏Ϩ
    ϕϧͷڧྗͳπʔϧ

    View full-size slide

  13. σϞ / movie

    View full-size slide

  14. GraphQLͷ༷ࢠ with GitHub
    Ϩεϙϯε
    +40/

    ϦΫΤετ
    (SBQI2-

    View full-size slide

  15. GraphQLͷ༷ࢠ with GitHub

    View full-size slide

  16. GraphQLͷ༷ࢠ with GitHub

    View full-size slide

  17. GraphQLͷ༷ࢠ with GitHub

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Relay
    1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠
    ͨView Frameworkͷ͜ͱ
    2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ࢓༷Ͱ͋
    ΔRelay Server Specificationͷ͜ͱ
    • GraphQLίΞʹෆ଍͢Δ෦෼Λิ׬͢Δ࢓
    ༷ͳͷͰशಘඞਢ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Relay Connection in GitHub
    WJFXFSDVSSFOUVTFSͷ
    lQVCMJDSFQPTJUPSJFT͔Β࠷৽ͭ
    ͨͩ͠GPSLΛআ͘z

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Relay Connection in GitHub

    View full-size slide

  34. Relay Connection in GitHub

    View full-size slide

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

    View full-size slide

  36. ͜͜·Ͱͷ·ͱΊ
    • GraphQL: Web API༻ͷΫΤϦݴޠ
    • GraphiQL: GraphQL༻ͷAPI console
    • Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ
    ͷ࢓༷
    • Relay Connection: ϖʔδϯάՄೳͳϦετͷ࢓༷

    View full-size slide

  37. GraphQL in Android

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Apollo for Android
    ˣίʔυੜ੒

    View full-size slide

  41. Apollo for Android
    • ΫΤϦ͝ͱʹΫϥε܈Λੜ੒͢Δ
    • ϦΫΤετΫϥε
    • ϨεϙϯεΫϥε
    • HTTP௨৴෦෼͸OkHttpʹґଘ

    View full-size slide

  42. Apollo for Android
    • ͋·Γ࢖ͬͯͳ͍ͷͰͬ͘͟Γॴײ
    • GraphQL query͸ରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ
    ͖͍͕ͨɺApolloͷ৔߹ *.graphql ʹॻ͘ͷ͕ෆศ
    • KotlinͩͬͨΒ෮਺จࣈྻϦςϥϧ͕͋ΔͷͰ
    view componentʹqueryΛॻ͘ͷ͸ϫϯνϟϯ
    ͋Γͦ͏

    View full-size slide

  43. JavaScript / TypeScript
    • Relay
    • Apollo
    • ੜGraphQLͰ΋ී௨ʹ࢖͑Δ
    • Kibela (web) ͸ੜGraphQLͰ΍͍ͬͯΔ

    View full-size slide

  44. Relay
    • “A JavaScript framework for building data-
    driven React applications”
    • σʔλͷྲྀΕ͸Fluxͱಉ͡
    • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘
    • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ
    աෆ଍ͳ͘஌͍ͬͯΔͷ͸ͦͷview͚͔ͩͩΒ

    View full-size slide

  45. Relayͷงғؾ

    View full-size slide

  46. Relayͷงғؾ
    3FBDU$PNQPOFOU

    View full-size slide

  47. Relayͷงғؾ
    (SBQI2-ΫΤϦ

    View full-size slide

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

    View full-size slide

  49. Relay does not meet TypeScript
    • KibelaͰ͸͓ͦΒ͘Relay͸࢖Θͳ͍
    • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β
    • ύονΛ౰ͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ
    • queryͱviewΛରԠͤ͞Δͱ͍͏ൃ૝͸Α͍ͷ
    Ͱͦͷൃ૝͚ͩࢀߟʹ͢Δ

    View full-size slide

  50. Ϟσϧ͸ʁ෗ഊ๷ࢭ૚͸ʁ
    • GraphQLΛ࢖͏ͱ͖͸ʮview component͕ඞཁͳ
    ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview
    ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏
    • Ϟσϧ΍෗ഊ๷ࢭ૚ͱ͍͏֓೦͸ෆཁͳͷͰ͸…ͱ
    ࢥ͍ͬͯΔ
    • ·ͩʮࣗ෼ͰAPIΛ։ൃ͠ͳ͕ΒviewΛ૊Ήʯ͜
    ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷล͸ະ஌਺Ͱ͸͋Δ

    View full-size slide

  51. εΩʔϚΛαόΫϥͰڞ༗ʁ
    • GraphQL API͸εΩʔϚΛΤϯυϙΠϯτͰε
    ΩʔϚΛฦ͢
    • ίʔυੜ੒ʹ͸εΩʔϚ͕ඞཁͳͷͰɺϏϧυ
    ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ
    ͘Δ
    • ͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε͹
    ։ൃ൛ͷར༻΋Մೳ

    View full-size slide

  52. ଞͷWeb APIख๏΁ͷॴײ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. vs RESTful API / Swagger
    OPUGPVOEͱͷ͜ͱ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. ·ͱΊ
    • ಡΈ΍͍͢ΫΤϦ
    • ΫΤϦΛಡΊ͹Ϩεϙϯε͕͍͍ͩͨ෼͔Δ
    • ܕ҆શͳεΩʔϚ
    • nullable / non-null ΋όονϦ૊ΈࠐΈ

    View full-size slide

  60. GraphQL͸͍͍ͧ

    View full-size slide