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.3k
すばらしき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.1k
実践TypeScriptトークバトル
gfx
1
1.1k
歴史的経緯の説明 as code
gfx
7
2.7k
Elasticsearchによる 全文検索の実装 in Rails
gfx
6
9.4k
マルチテナント・ウェブアプリケーションの実践
gfx
14
9.5k
How to choose the ORM on Android
gfx
1
4.2k
How Do We Get Along With Static Types
gfx
5
3.3k
"OSSにコントリビュート" なんてしてる場合じゃない!
gfx
21
15k
Other Decks in Technology
See All in Technology
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
0
430
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
18
4.2k
[2024年10月版] Notebook 2.0のご紹介 / Notebook2.0
databricksjapan
0
1.7k
さいきょうのアーキテクチャを生み出すセンスメイキング
jgeem
0
350
extensionとschema
yahonda
1
150
論文紹介 ”Long-Context LLMs Meet RAG: Overcoming Challenges for Long Inputs in RAG” @GDG Tokyo
shukob
0
280
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
160
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
220
教師なし学習の基礎
kanojikajino
4
380
DeepSeek on AWS
hariby
1
180
re:Invent Recap (January 2025)
scalefactory
0
340
Postman Vaultを使った秘密情報の安全な管理
nagix
3
210
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
GraphQLとの向き合い方2022年版
quramy
44
13k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Typedesign – Prime Four
hannesfritz
40
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
A better future with KSS
kneath
238
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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͍͍ͧ