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. ࣗݾ঺հ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey,

    Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ৘ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰ͸ʮORMͷબͼํʯͰͨ͠
  2. Kibela Web API • GraphQLΛ࠾༻ • ಺෦APIͱͯ͠͸Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠΋࠾༻༧ఆ •

    2018೥தʹ͸ެ։͍ͨ͠ • ϞόΠϧ༻API΋౰વGraphQL • ΞϓϦ͸React NativeͰ࣮૷༧ఆʢ༧ఆ͕஗Ε͓ͯΓະணखʣ
  3. SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏ଄ͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͠΍͍͢ •

    ΫϥΠΞϯταΠυ͸schemaͷมߋΛ௥͏͜ͱͰαʔ όʔαΠυͷ࢓༷มߋʹ௥ै͠΍͍͢ • Schema͔Βͷίʔυੜ੒Ͱܕ҆શͳίʔυΛॻ͚Δ
  4. GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API࢓༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧ͸HTTP

    • ೝূ΍response bodyͷѹॖͳͲ͸HTTPʹ४ͣΔ • ಺෦APIͱͯ͠΋֎෦APIͱͯ͠΋༗ޮ
  5. GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API

    explorer • ิ׬͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞ಺ଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ࢖͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ
  6. ܕγεςϜ • جຊܕ + ഑ྻ + Ϋϥε + ΠϯλʔϑΣΠε •

    جຊܕ͸Int, Float, Boolean, String, ID • Ϋϥε͸෮਺ͷΠϯλʔϑΣΠεΛ࣮૷Ͱ͖Δ • ΠϯλʔϑΣΠε͸JavaͷͦΕͱ΄΅ಉ͡ • શͯͷܕ͸non-nullʹͰ͖Δ (e.g. String!)
  7. Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ࢓༷Ͱ͋ ΔRelay

    Server Specificationͷ͜ͱ • GraphQLίΞʹෆ଍͢Δ෦෼Λิ׬͢Δ࢓ ༷ͳͷͰशಘඞਢ
  8. ͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console •

    Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ࢓༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ࢓༷
  9. Apollo - GraphQL client • JS / Android / iOS

    ༻ͷApollo client͕͋Δ • Apollo for Android͸JavaΛ૝ఆ • ΫΤϦ͔ΒJavaίʔυΛੜ੒͢ΔϥΠϒϥϦ • ΫΤϦ͕ද͢σʔλߏ଄ͷΫϥεΛੜ੒͢Δ
  10. Apollo for Android • ͋·Γ࢖ͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL query͸ରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ৔߹ *.graphql

    ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮਺จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷ͸ϫϯνϟϯ ͋Γͦ͏
  11. Relay • “A JavaScript framework for building data- driven React

    applications” • σʔλͷྲྀΕ͸Fluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆ଍ͳ͘஌͍ͬͯΔͷ͸ͦͷview͚͔ͩͩΒ
  12. Relay does not meet TypeScript • KibelaͰ͸͓ͦΒ͘Relay͸࢖Θͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β •

    ύονΛ౰ͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃ૝͸Α͍ͷ Ͱͦͷൃ૝͚ͩࢀߟʹ͢Δ
  13. vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮਺ͷҙຯΛ࣋ͨͤͨ݁Ռ࢖͍෺ʹͳΒͳ ͍͜ͱ͕͠͹͠͹ • OAuth

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

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