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

9278c3a06b8d8752fb913dea93f959c1?s=47 FUJI Goro
February 09, 2018

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

DroidKaigi 2018のスライドです

9278c3a06b8d8752fb913dea93f959c1?s=128

FUJI Goro

February 09, 2018
Tweet

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 WJFXFSDVSSFOUVTFSͷ lQVCMJDSFQPTJUPSJFT͔Β࠷৽ͭ ͨͩ͠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 OPUGPVOEͱͷ͜ͱ

  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͸͍͍ͧ