Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
すばらしきGraphQLのSEKAIへようこそ
Search
FUJI Goro
February 09, 2018
Technology
20
9k
すばらしきGraphQLのSEKAIへようこそ
DroidKaigi 2018のスライドです
FUJI Goro
February 09, 2018
Tweet
Share
More Decks by FUJI Goro
See All by FUJI Goro
How to Boost Your Code with WebAssembly
gfx
2
2.6k
AssemblyScriptでライブラリコードの高速化をしてみる
gfx
5
2.7k
実践TypeScriptトークバトル
gfx
1
980
歴史的経緯の説明 as code
gfx
7
2.6k
Elasticsearchによる 全文検索の実装 in Rails
gfx
5
9.1k
マルチテナント・ウェブアプリケーションの実践
gfx
14
9.3k
How to choose the ORM on Android
gfx
1
4k
How Do We Get Along With Static Types
gfx
5
3.2k
"OSSにコントリビュート" なんてしてる場合じゃない!
gfx
21
14k
Other Decks in Technology
See All in Technology
いまからでも遅くない!仮想化基盤運用者に向けたコンテナ基盤移行で気にすべきポイント
moribito
0
170
Kubernetesで作るIaaS基盤/KubeVirt Deep Dive
oracle4engineer
PRO
11
2.1k
自動生成されたhttpエンドポイントごとにカスタムミドルウェアを挿入したい話
uhzz
1
1.7k
Spring I/O 2024 - Dapr for Spring Boot Developers
salaboy
0
4.5k
組合せ最適化による問題解決の実践的アプローチ
recruitengineers
PRO
8
1k
Unified Diff 形式の差分から Go AST を構築して feature flag を自動計装する
biwashi
7
810
C / C++ - language
pohjus
1
160
ゆるSRE勉強会 #6 LT
okaru
0
170
ドラッグストア店員が 独学で化粧品顧客管理アプリを作成した話
mierune
PRO
1
220
最後に勝つ負け方を知っておく
applepine1125
1
250
障害対応の人間的側面
katsuhisa91
PRO
1
490
しみじみ語る Microsoftの考える プラットフォームエンジニアリング
torumakabe
2
240
Featured
See All Featured
Thoughts on Productivity
jonyablonski
61
4k
The Pragmatic Product Professional
lauravandoore
27
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
40
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
5
230
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
What the flash - Photography Introduction
edds
64
11k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Transcript
͢Β͖͠ GraphQLͷSEKAIΑ͏ͦ͜ DroidKaigi 2018, day 2, 14:50-15:20 gfx at Bit
Journey, Inc.
ࣗݾհ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey,
Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰʮORMͷબͼํʯͰͨ͠
ࣗݾհ
Kibela
Kibela Web API • GraphQLΛ࠾༻ • ෦APIͱͯ͠Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠࠾༻༧ఆ •
2018தʹެ։͍ͨ͠ • ϞόΠϧ༻APIવGraphQL • ΞϓϦReact NativeͰ࣮༧ఆʢ༧ఆ͕Ε͓ͯΓະணखʣ
Agenda • SDD: Schema-Driven Developmentʹ͍ͭͯ • GraphQLͱԿ͔ • GraphQL in
Android • With Java / Kotlin • With React Native
SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͍͢͠ •
ΫϥΠΞϯταΠυschemaͷมߋΛ͏͜ͱͰαʔ όʔαΠυͷ༷มߋʹै͍͢͠ • Schema͔ΒͷίʔυੜͰܕ҆શͳίʔυΛॻ͚Δ
DroidKaigi 2018ͱSDD • Web APIͷSDDޚࡾՈ͕ἧ͍ʂʂ • ·ͩAPIఆٛཧͰফͯ͠ΔͷʁʙSwaggerΛ༻ ͍ͨେنΞϓϦ࣌ͷAPIఆٛཧͱίʔυδΣ ωϨʔτʙ •
gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ • ͢Β͖͠GraphQLͷSEKAIΑ͏ͦ͜
yugui, 2018 ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ https://qiita.com/yugui/items/160737021d25d761b353 “ࣗͷྖҬʹดͨ͡σʔλߏͰ͋Εɺ εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ ਐΊΔͷ͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘ ͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ ٛͱ͍͏੫ۚΛࢧΘͳ͍ͱͦͷͷπέͲ͜
͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃͱ͔ɺͦ ͏͍͏ͭͰࢧ͏͜ͱʹͳΔɻ”
GraphQLͱԿ͔
GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧHTTP
• ೝূresponse bodyͷѹॖͳͲHTTPʹ४ͣΔ • ෦APIͱͯ͠֎෦APIͱͯ͠༗ޮ
“ϦιʔεऔಘʹಛԽͨ͠Web API” • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ • Ϧιʔεߋ৽ܥϝιουΛఆٛͯ͠ݺͿײ ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτগͳ ͍ • “ϦιʔεͷऔಘʹGraphQLΛͬͯߋ৽
RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ͍ΔϨϕϧ
GitHubͷGraphQL APIΛ GaphiQLͰோΊΔ
GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API
explorer • ิ͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ
σϞ / movie
GraphQLͷ༷ࢠ with GitHub Ϩεϙϯε +40/ ϦΫΤετ (SBQI2-
GraphQLͷ༷ࢠ with GitHub
GraphQLͷ༷ࢠ with GitHub
GraphQLͷ༷ࢠ with GitHub
GraphQLͷ༷ࢠ with GitHub %#ΧϥϜͷͰͳ͘ ՃࡁΈͷϑΟʔϧυʂ
GraphQLͷ༷ࢠ with GitHub ϦΫΤετΛΈΕ Ϩεϙϯεͷߏ͕Θ͔Δʂ
GraphQLͷ༷ࢠ with GitHub υΩϡϝϯτϏϡʔΞ͖ʂ
GraphQLͷ༷ࢠ with GitHub SPPUʹఆٛ͞Ε͍ͯΔͷେ ͷ߹RVFSZͱNVUBUJPOͷΈ
GraphQLͷ༷ࢠ with GitHub ͜͜Ͱྫʹ͍ͬͯΔ SFQPTJUPSZϑΟʔϧυ PXOFSͱOBNΛҾʹͱΓ 3FQPTJUPSZܕΛฦ͢ͱͷ͜ͱ
GraphQLͷ༷ࢠ with GitHub 3FQPTJUPSZܕͷৄࡉ ࣮͍ͯ͠ΔΠϯλʔϑΣΠε ଘࡏ͢ΔϑΟʔϧυ
͜͜·Ͱͷ·ͱΊ • ϦΫΤετ͔ΒϨεϙϯεͷߏ͕͔Δ • ΞϓϦέʔγϣϯ͕ͦͷͰඞཁͳϑΟʔϧυ ͚ͩΛϦΫΤετ͢ΔͨΊ༨ܭͳܭࢉ͕ෆཁ • ͨͱ͑ઌͷྫͩͱ “descriptionHTML”
ෆཁͳͱ͖ϦΫΤετ͠ͳ͍͜ͱͰαʔόʔ αΠυͰͷܭࢉΛݮͰ͖Δ
ܕγεςϜ • جຊܕ + ྻ + Ϋϥε + ΠϯλʔϑΣΠε •
جຊܕInt, Float, Boolean, String, ID • Ϋϥε෮ͷΠϯλʔϑΣΠεΛ࣮Ͱ͖Δ • ΠϯλʔϑΣΠεJavaͷͦΕͱ΄΅ಉ͡ • શͯͷܕnon-nullʹͰ͖Δ (e.g. String!)
Mutation • Ϧιʔεߋ৽ܥͷΫΤϦλΠϓ • ࣗ༝ʹ໊લΛ͚ͭΒΕΔͷͰɺRESTͷPOST/ PUT/PATH/DELETEͷ͜ͱΕͯΑ͍
Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ༷Ͱ͋ ΔRelay
Server Specificationͷ͜ͱ • GraphQLίΞʹෆ͢Δ෦Λิ͢Δ ༷ͳͷͰशಘඞਢ
Relay Connection • ϦιʔεϦετͷϖʔδϯάΛఆΊ༷ͨ • edges: ϦετͷεϥΠεΛද͢ྻ • node: Ϧετͷ1ཁૉ
ͳͥRelay Connection͕ඞཁ͔ • ϦετͷεϥΠεͰ͋ΔྻΛฦ͍ͨ͠ • ҙͷϝλσʔλΛฦ͍ͨ͠ • ͭ·ΓੜͷྻΛฦ͢Θ͚ʹ͍͔ͳ͍ • ͦ͜Ͱ
edges / node ͱ͍͏Λઃ͚ͨ
Relay Connection in GitHub WJFXFSDVSSFOUVTFSͷ lQVCMJDSFQPTJUPSJFT͔Β࠷৽ͭ ͨͩ͠GPSLΛআ͘z
Relay Connection in GitHub ΧελϜϝλσʔλ
Relay Connection in GitHub ྻʹؔͯ͠ΫΤϦͷߏ͔Β ࣗ໌Ͱͳ͍͕ʜ
Relay Connection in GitHub
Relay Connection in GitHub
ΫΤϦखॻ͖ʁ • खॻ͠Ζͱ͍͏ઃܭҙਤΛόϦόϦײ͡Δ • ΫΤϦͷߏ͕ϨεϙϯεͷߏΛܾΊΔ͔Β • ΑͬͯɺϨεϙϯεͷσʔλܕΛίʔυੜ͢ ΔͳΒΫΤϦ੩తͰͳ͚ΕͳΒͳ͍ • GraphiQL͕͋ΕۤͰͳ͍ͷͷཧతʹ
͍׳ΕͨΤσΟλͰॻ͖͍͕ͨ…
͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console •
Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ༷
GraphQL in Android
Apollo - GraphQL client • JS / Android / iOS
༻ͷApollo client͕͋Δ • Apollo for AndroidJavaΛఆ • ΫΤϦ͔ΒJavaίʔυΛੜ͢ΔϥΠϒϥϦ • ΫΤϦ͕ද͢σʔλߏͷΫϥεΛੜ͢Δ
ΫΤϦ͔ΒίʔυΛੜ͢Δ • ίʔυ͔ΒΫΤϦΛੜ͢ΔͷͰͳ͍ • OrmaͳͲͷORMίʔυ͔ΒΫΤϦΛੜ ͕ͪ͠ • ͳͥͳΒɺΫϥεΛੜ͢ΔͨΊʹΫΤϦ͕ ੩తͰͳ͍ͱ͍͚ͳ͍͔Β
Apollo for Android ˣίʔυੜ
Apollo for Android • ΫΤϦ͝ͱʹΫϥε܈Λੜ͢Δ • ϦΫΤετΫϥε • ϨεϙϯεΫϥε •
HTTP௨৴෦OkHttpʹґଘ
Apollo for Android • ͋·Γͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL queryରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ߹ *.graphql
ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷϫϯνϟϯ ͋Γͦ͏
JavaScript / TypeScript • Relay • Apollo • ੜGraphQLͰී௨ʹ͑Δ •
Kibela (web) ੜGraphQLͰ͍ͬͯΔ
Relay • “A JavaScript framework for building data- driven React
applications” • σʔλͷྲྀΕFluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆͳ͍ͬͯ͘Δͷͦͷview͚͔ͩͩΒ
Relayͷงғؾ
Relayͷงғؾ 3FBDU$PNQPOFOU
Relayͷงғؾ (SBQI2-ΫΤϦ
Relayͷงғؾ 3FMBZ2VSZ3FOEFSFSͷSFOEFSͰ σʔλ͔ΒW%0.Λߏஙͯ͠ฦ͢
Relay does not meet TypeScript • KibelaͰ͓ͦΒ͘RelayΘͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β •
ύονΛͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃΑ͍ͷ Ͱͦͷൃ͚ͩࢀߟʹ͢Δ
Ϟσϧʁഊࢭʁ • GraphQLΛ͏ͱ͖ʮview component͕ඞཁͳ ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏ • Ϟσϧഊࢭͱ͍͏֓೦ෆཁͳͷͰ…ͱ ࢥ͍ͬͯΔ •
·ͩʮࣗͰAPIΛ։ൃ͠ͳ͕ΒviewΛΉʯ͜ ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷลະͰ͋Δ
εΩʔϚΛαόΫϥͰڞ༗ʁ • GraphQL APIεΩʔϚΛΤϯυϙΠϯτͰε ΩʔϚΛฦ͢ • ίʔυੜʹεΩʔϚ͕ඞཁͳͷͰɺϏϧυ ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ ͘Δ •
͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε ։ൃ൛ͷར༻Մೳ
ଞͷWeb APIख๏ͷॴײ
vs RESTful API / Swagger • RESTfulݸਓతʹʮWeb APIΛແཧΓ HTTPʹ͍ͤͯΔʯײ͕͋ͬͯͭΒ͍
vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮ͷҙຯΛ࣋ͨͤͨ݁Ռ͍ʹͳΒͳ ͍͜ͱ͕͠͠ • OAuth
scope͕Γͳ͍ͱ͖ϩάΠϯϢʔβͷݖݶ͕ͳ͍ͱ͖ʹ 403Λฦͨ͠Γ͢ΔͷͰ403Ͱذͨ͋͠ͱߋʹผͷใͰذ͕ඞཁ • ϦΫΤετͷඞਢύϥϝʔλͷෆ400? 404? 422? • ಉҰαʔϏεͰ͢Β౷Ұ͞Εͯͳ͍͜ͱ • ϦόʔεϓϩΩγ͕502ͱ͔503Λฦ͢ • εςʔλείʔυʹAPIͷ༷ͱͦΕҎ֎ͷ༷͕ࠞࡏ͍ͯ͠Δ…
vs RESTful API / Swagger • GraphQLʮGraphQLϨϕϧͰॲཧ͕ޭ͠ ͨΒ200ʯͰݻఆ͢Δ • ΤϥʔίʔυϨεϙϯεͷerrorsϑΟʔϧυ
Ͱදݱ͢Δ
vs RESTful API / Swagger OPUGPVOEͱͷ͜ͱ
vs RESTful API / Swagger • RESTͩͱ GET / POST
/ PUT / PATCH / DELETE ͚ͩͰશͯͷߋ৽ܥͷৼΔ͍Λද ݱ͠ͳ͍ͱ͍͚ͳ͍ • ʮϑΟʔϧυͷআʯDELETE? PATCH? • GraphQLͷߋ৽ܥʢmutationʣҙͷ໊લ Λ͚ͭΒΕΔͷͰదͳ໊લΛ͚ͭΕΑ͍
vs gRPC • ͜ͷ෦ͷ࣍ͷ࣌ؒͷςʔϚ͕gRPCͳͷͰৄ ͦͪ͘͠Βʂ • ൚༻ੑͷߴ͍RPCϥΠϒϥϦͰ࣮͋Δ • GraphQLͷΑ͏ͳʮ࠷খݶͷϦιʔεΛऔ ಘʯ͢Δͷ͕ऑ͍ҹ
·ͱΊ • ಡΈ͍͢ΫΤϦ • ΫΤϦΛಡΊϨεϙϯε͕͍͍͔ͩͨΔ • ܕ҆શͳεΩʔϚ • nullable /
non-null όονϦΈࠐΈ
GraphQL͍͍ͧ