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.5k
実践GraphQL for クライアント側
東京Node学園祭2018での発表資料
ryota0624
November 23, 2018
Tweet
Share
More Decks by ryota0624
See All by ryota0624
techtalk5-su
ryota0624
0
1.1k
kyash-meetup-vol7-suzuki.pdf
ryota0624
0
240
2019-06-01_10-10_oretoku_frontend.pdf
ryota0624
0
78
2019-03-30_11-49_architecture_night.pdf
ryota0624
0
1.7k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How to Ace a Technical Interview
jacobian
277
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
54
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building an army of robots
kneath
306
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
KATA
mclloyd
30
14k
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