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
9.4k
すばらしき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.9k
AssemblyScriptでライブラリコードの高速化をしてみる
gfx
5
3.2k
実践TypeScriptトークバトル
gfx
1
1.2k
歴史的経緯の説明 as code
gfx
7
2.8k
Elasticsearchによる 全文検索の実装 in Rails
gfx
6
9.5k
マルチテナント・ウェブアプリケーションの実践
gfx
14
9.6k
How to choose the ORM on Android
gfx
1
4.3k
How Do We Get Along With Static Types
gfx
5
3.4k
"OSSにコントリビュート" なんてしてる場合じゃない!
gfx
21
15k
Other Decks in Technology
See All in Technology
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.3k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
580
インフラ寄りSREの生存戦略
sansantech
PRO
9
3.5k
VGGT: Visual Geometry Grounded Transformer
peisuke
1
670
【Oracle Cloud ウェビナー】【入門&再入門】はじめてのOracle Cloud Infrastructure [+最新情報]
oracle4engineer
PRO
1
110
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
520
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
210
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
970
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
240
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
1
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
32
1k
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͍͍ͧ