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 for クライアント側
Search
ryota0624
November 23, 2018
2
2.3k
実践GraphQL for クライアント側
東京Node学園祭2018での発表資料
ryota0624
November 23, 2018
Tweet
Share
More Decks by ryota0624
See All by ryota0624
techtalk5-su
ryota0624
0
970
kyash-meetup-vol7-suzuki.pdf
ryota0624
0
200
2019-06-01_10-10_oretoku_frontend.pdf
ryota0624
0
73
2019-03-30_11-49_architecture_night.pdf
ryota0624
0
1.6k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
202
24k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How STYLIGHT went responsive
nonsquared
95
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fireside Chat
paigeccino
32
3k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Cult of Friendly URLs
andyhume
78
6k
Thoughts on Productivity
jonyablonski
67
4.3k
Done Done
chrislema
181
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Transcript
࣮ફGraphQL for ΫϥΠΞϯταΠυ 1 @4245Ryomt ౦ژNodeֶԂࡇ2018
ࣗݾհ ླ྄ଠ @4245Ryomt Fringe81גࣜձࣾ Elm / Go / Scala /
TypeScript 2
ࠓΛ͢Δ͜ͱ - GraphQLͬͯͳʹʁ - GraphQLΛ࣮ફͨ͠ϓϩμΫτͷհ - GraphQLʹΑͬͯղফ͞Εͨۤ͠Έ - GraphQLΛ্ͬͨͰͷ 3
ࠓ͓࣋ͪؼΓͯ͠΄͍͜͠ͱ - GraphQLΛͬͯΒ͏ - GraphQL৮ͬͯΈΑ͏͔ͳɻͱ͍͏ح৺ 4
ࠓ͞ͳ͍͜ͱ - GraphQLͷࡉ͔͍༷ - ಛఆϥΠϒϥϦͷ͍ํ - Elmͷ͜ͱ(εϚϯʂ) 5
GraphQLʹ͍ͭͯ 6
GraphQLʹ͍ͭͯ ͲΜͳͷʁ ܕγεςϜͱͱʹ͋Δɺquery language facebook͕2015ʹReactͷϒϩάͰRelayͱͱʹհ ͦͷ̎લ͔ΒAndroid, iOSͷΞϓϦͰར༻͞Ε͍ͯͨ ࠷ۙfoundation͕Ͱ͖ͨ 7
GraphQLʹ͍ͭͯ ͲΜͳͷʁ API༻ͷΫΤϦݴޠ HTTPͰΓͱΓ͞ΕΔ߹: POSTϦΫΤετͷϘσΟʹQueryΛͷͤͯΓͱΓ σʔλϑΣονʹϑΥʔΧε༷ͨ͠ 8
GraphQLʹ͍ͭͯ ͲΜͳΩʔϫʔυ͕͋Δͷ͔ εΩʔϚ, Query, Mutation, Fragment,ΤΠϦΞε, ΠϯϥΠϯϑϥάϝϯτ,σΟϨΫςΟϒ, introspection, ܕγεςϜ, ΠϯϓοτλΠϓ,
ϢχΦϯλΠϓ, ΠϯλʔϑΣʔε, Non-Null, ScalarType, subscription ...etc 9
GraphQLʹ͍ͭͯ ࠓѻ͏Ωʔϫʔυ εΩʔϚ, Query, Mutation, Fragment,ΤΠϦΞε, ΠϯϥΠϯϑϥάϝϯτ,σΟϨΫςΟϒ, introspection, ܕγεςϜ, ΠϯϓοτλΠϓ,
ϢχΦϯλΠϓ, ΠϯλʔϑΣʔε, Non-Null, ScalarType, subscription ...etc 10
GraphQLʹ͍ͭͯ Query / Mutation 11 GraphQLͷΤϯυϙΠϯτʹର͢Δૢ࡞ Query -> GETͰ࣮ݱ͢ΔΑ͏ͳૢ࡞ Mutation
-> GETҎ֎Ͱ࣮ݱ͢ΔΑ͏ͳૢ࡞
GraphQLʹ͍ͭͯ Query Mutation 12 Query / Mutation
GraphQLʹ͍ͭͯ Query / Mutationͷ݁Ռ 13
GraphQLʹ͍ͭͯ ϑΟʔϧυʹҾΛ͢͜ͱͰ͖Δ 14 Queryͷಛ
GraphQLʹ͍ͭͯ Queryͷಛ: σʔλͷؔ࿈ΛͨͲͬͯσʔλ͕ͱΕΔɻ 15
GraphQLʹ͍ͭͯ Queryͷಛ: σʔλͷؔ࿈ΛͨͲͬͯσʔλ͕ͱΕΔɻ 16 friends user job job job job
RESTFulͳΒ... /users/$id ~> /users/$id/friends ~> /jobs/$id ?
GraphQLʹ͍ͭͯ ܕγεςϜ String, Int, Float, Boolean, List, NonNull, Enumͱ͔ interface,
UnionType ObjectType 17 ObjectType ʮUserʯͷఆٛ
GraphQLʹ͍ͭͯ https://graphql.org 18
GraphQLΛ࣮ફͨ͠ϓϩμΫτͷհ 19
GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ࠷ۙϓϨεϦϦʔε͕͞Ε·ͨ͠ - ࠂ৴γεςϜͷཧը໘ - ࠂӡ༻͢Δਓ͕͏ը໘ - ͨΒσʔλಉ͕࢜ؔ࿈Λ࣋ͭ
20
GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ࠷ۙϓϨεϦϦʔε͕͞Ε·ͨ͠ 21
GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ͨΒσʔλಉ͕࢜ؔ࿈Λ࣋ͭ 22
GraphQLΛར༻ͨ͠ϓϩμΫτ(ٕज़ߏ) 23 ϑϩϯτΤϯυ όοΫΤϯυ File
͜ͷϓϩμΫτͰGraphQLΛ͓͏ͱͨ͠ϫέ 24
͜ͷϓϩμΫτͰGraphQLΛ͓͏ͱͨ͠ϫέ աڈͷۤ͠Έ͔Β 25
GraphQLʹΑͬͯղফͨۤ͠͠Έ 26
աڈͷϓϩμΫτͰͷۤ͠ΈͱGraphQLʹΑΔղফ ❌ αʔό,ΫϥΠΞϯτؒͷΠέͯͳ͞ ❌ σʔλऔಘͷෳࡶԽ ❌ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ 27
❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ `ؒ` ͱʁ 28
`ؒ` ͱ ίϛϡχέʔγϣϯ API༷ͷΓͱΓਖ਼ࠐΊͯ࡞ΔϚʔΫμϯͷςʔϒϧ 29 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞
API༷ͷΓͱΓਖ਼ࠐΊͯ࡞ΔϚʔΫμϯͷςʔϒϧ 30 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞
ίϛϡχέʔγϣϯGraphQLεΩʔϚத৺ʹ αʔό,ΫϥΠΞϯτؒͰڞ༗͞ΕΔυΩϡϝϯτ࣮ࡍͷίʔυ͔Βੜ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ 31
GraphQLεΩʔϚத৺ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ 32 εΩʔϚ ࣗಈੜυΩϡϝϯτ
❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ ΤϯυϙΠϯτ͕ͨ͘͞Μ Ұͭը໘Λදࣔ͢ΔͨΊʹͨ͘͞ΜͷΤϯυϙΠϯτͱΓͱΓ ϨεϙϯεΛѻ͏ίʔυͷෆ҆ 33
͍ΖΜͳͱ͜httpͳ͛ͯϨεϙϯε Λ߹͍ͯ͘͠ ίʔυ࣮ࡍͷͷ͡Όͳͯ͘ΠϝʔδͰ͢ 34 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ
͍ΖΜͳͱ͜httpͳ͛ͯϨεϙϯε Λ߹͍ͯ͘͠ ίʔυ࣮ࡍͷͷ͡Όͳͯ͘ΠϝʔδͰ͢ 35 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ
ෳURLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯεฦͬͯ͘Ε৴༻Ͱ͖Δ ίʔυ࣮ࡍͷͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 36
ෳURLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯεฦͬͯ͘Ε৴༻Ͱ͖Δ ίʔυ࣮ࡍͷͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 37
ෳURLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯεฦͬͯ͘Ε৴༻?Ͱ͖Δ ίʔυ࣮ࡍͷͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ʁ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 38
GraphQLʹ͍ͭͯ introspection ܕγεςϜͷϝλσʔλΛऔΕΔΈ introspection query 39
αʔό͔Βऔಘͨ͠σʔλΛεΩʔϚͰอূ͞ΕͨΑ͏ʹར༻Ͱ͖Δ introspectionγεςϜ͔ΒऔΓग़͢GraphQLͷܕγεςϜͷϝλσʔλͷ͓͔͛ 40 ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ
JSON 41 ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ αʔό ϝλσʔλ ։ൃऀ ग़ྗ πʔϧ
ར༻ ιʔείʔυ ग़ྗ ҆શɾศར
✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 42
❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ σʔλऔಘͷෳࡶԽͰى͖Δ͏̍ͭͷଆ໘ ΤϯυϙΠϯτͷ͚ͩωοτϫʔΫͷߦ͖དྷ͕͔͞Ή ඞཁͷͳ͍ϑΟʔϧυૹΒΕͯ͘Δ 43
❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ ΤϯυϙΠϯτͷ͚ͩωοτϫʔΫͷߦ͖དྷ͕͔͞Ή 44
✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ /graphqlͷϦΫΤετҰൃͰཉ͍͠ͷ͕ͯ͢खʹೖΔ 45
✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ ඞཁͷͳ͍ϑΟʔϧυૹΒΕͯ͘Δ IDͱ໊લ͚ͩ΄͍͠Α͏ͳͱ͖ʹଞͷϑΟʔϧυ·Ͱ... GraphQLͳΒ͍Βͳ͍ϑΟʔϧυૹΔͳΑ͕Ͱ͖Δʂ 46
աڈͷϓϩμΫτͰͷۤ͠Έͱղফ(·ͱΊ) ✅ αʔό,ΫϥΠΞϯτؒͷΠέͯͳ͞ => Schema͕ڞ௨ݴޠʹͳΔ & ίʔυ͔ΒυΩϡϝϯτ͕ੜ ✅ σʔλऔಘͷෳࡶԽ =>
σʔλऔಘͷϦΫΤετ̍ͭʹ & introspectionΛ׆༻Ͱܕ҆શ ✅ σʔλऔಘͷϘτϧωοΫ => ΦʔόʔϔουݮΔ & ඞཁͷͳ͍ϑΟʔϧυૹΒΕͯ͜ͳ͍ 47
աڈͷۤ͠ΈGraphQLʹΑͬͯղফ͞Εͨɺ࠷ߴʁ Yes! ͚ͩͲGraphQLͰͳ࣮ͯ͘ݱͰ͖ΔΑͶɻ υΩϡϝϯτ: JSON-Schema, Swagger σʔλऔಘͷޮԽ: BFF αʔό, ΫϥΠΞϯτͷอূ:
αʔόΫϥΠΞϯτͰಉ͡ݴޠΛ͏ 48
ࠔͬͨ͜ͱ ϦΫΤετ͕શ෦/graphqlʹͳΔ RESTfulͳΒΤϯυϙΠϯτ͝ͱͷϨεϙϯελΠϜΛݟͯϘτϧωοΫ͕͞͠Ͱ ͖͚ͨͲͰ͖ͳ͘ͳͬͨ ΤϥʔτϥοΩϯάπʔϧ͕ग़ͯ͘͠ΕΔΑ͏ͳϢʔβͷߦಈͷHttpϦΫΤ ετ෦͕શ෦ͭͿΕΔ 49
ͦΕͰͳͥGraphQLʹ౿Έͬͨͷʁ GraphQL֮͑͑ͯ͞͠·͑Γ͍ͨ͜ͱ͕࣮ݱͰ͖Δ αʔόαΠυ͕ΫϥΠΞϯταΠυʹͬͨΓ͠ͳ͍ νʔϜϝϯόʹGraphQLΓ͍ͨਓ͕͍ͨ - αʔόαΠυʹ͍ͨͷ͕ӡ ϒϧʔΦʔγϟϯ 50
ͰɺGraphQLͲ͏ͳͷʁ ࠔͬͨ͜ͱ͋Γͭͭɺࢼߦࡨޡ͠ͳ͕Βͬͯ·͢ɻ τʔλϧͰࢫຯͷ΄͏͕ײ͡ΕͯΔͷͰΦεεϝͰ͢ɻ 51
GraphQLΛ্ͬͨͰͷ 52
GraphQLΛѻ্ͬͨͰͷ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ໊લΛ͚ͭΔ ϑϥάϝϯτΛੵۃతʹ͏ 53
GraphQLΛѻ্ͬͨͰͷ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ໊લΛ͚ͭΔ ΫΤϦʔʹ໊લΛ͚ͭΒΕΔ ΫΤϦ͕͛ΒΕͨจ຺Λ໌֬ʹͰ͖Δ 54
GraphQLΛѻ্ͬͨͰͷ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ໊લΛ͚ͭΔ 55 ͋ͬͨΒ? - ϩά͔ΒΫΤϦૹ৴ͷจ຺͕Θ͔Δ - τϥϒϧγϡʔςΟϯά - σόοά
GraphQLΛѻ্ͬͨͰͷ ϑϥάϝϯτΛੵۃతʹ͏ 56
GraphQLʹ͍ͭͯ fragment ΫΤϦͷ࠶ར༻ੑΛߴΊΔ 57
GraphQLΛѻ্ͬͨͰͷ ϑϥάϝϯτΛੵۃతʹ͏ 58 ϥΠϒϥϦӽ͠ʹΫΤϦΛ࡞͍ͬͯΔͱΕ͕ͪ
GraphQLΛѻ্ͬͨͰͷ ϑϥάϝϯτΛੵۃతʹ͏ 59 ͬͪ·ͬͨܦݧ
GraphQLΛѻ্ͬͨͰͷ ϑϥάϝϯτΛੵۃతʹ͏ 60 ؔݺͼग़͠తʹΫΤϦͷ̍෦ΛએݴͰ͖Δ -> ؔݺͼग़͠తʹΫΤϦΛ࡞͍ͬͯΔ͔Βڞ௨ԽͰ͖͍ͯΔ෩
GraphQLΛѻ্ͬͨͰͷ(·ͱΊ) 61 ΫΤϦʔ/ϛϡʔςʔγϣϯʹ໊લΛ͚ͭΔ => HTTPϦΫΤετΛૹͬͨจ຺Λ໌ࣔతʹ͢ΔͨΊ ϑϥάϝϯτΛੵۃతʹ͏ => ϥΠϒϥϦӽ͠ʹGraphQLΫΤϦʔΛੜͯ͠ΔͱΕ͕ͪ
࠷ޙʹ GraphQL͓͢͢Ίɻ - ΫϥΠΞϯταΠυͲ͏͠Α͏ͳ͍σϝϦοτΛײͯ͡ͳ͍ - ࣍RESTΑΓGraphQLͷ΄͏͕͍͍ͳ͊ GraphQL͡Όͳ͍ͱͰ͖ͳ͍͜ͱͳ͍ɻ ·ͩ·ͩࡧத αʔόαΠυͷͪ͜Β https://speakerdeck.com/petitviolet/real-world-graphql-on-scala
62
࠷ޙʹ αʔόαΠυͷͪ͜Β https://speakerdeck.com/petitviolet/real-world-graphql-on-scala 63
͓͠·͍ 64