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.1k
すばらしき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.8k
実践TypeScriptトークバトル
gfx
1
1k
歴史的経緯の説明 as code
gfx
7
2.6k
Elasticsearchによる 全文検索の実装 in Rails
gfx
5
9.3k
マルチテナント・ウェブアプリケーションの実践
gfx
14
9.4k
How to choose the ORM on Android
gfx
1
4.1k
How Do We Get Along With Static Types
gfx
5
3.3k
"OSSにコントリビュート" なんてしてる場合じゃない!
gfx
21
14k
Other Decks in Technology
See All in Technology
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
380
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
2
550
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
Fediverse Discovery Providers overview
andypiper
0
160
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
190
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
100
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
600
再考 アクターモデル/ reconsider actor model
ytake
0
310
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
691
190k
The Invisible Side of Design
smashingmag
295
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Side Projects
sachag
451
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Ruby is Unlike a Banana
tanoku
96
11k
Practical Orchestrator
shlominoach
185
10k
What's in a price? How to price your products and services
michaelherold
242
11k
Happy Clients
brianwarren
96
6.6k
Fireside Chat
paigeccino
31
2.9k
A Philosophy of Restraint
colly
202
16k
Raft: Consensus for Rubyists
vanstee
135
6.5k
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͍͍ͧ