Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践GraphQL for クライアント側
Search
ryota0624
November 23, 2018
2
2.4k
実践GraphQL for クライアント側
東京Node学園祭2018での発表資料
ryota0624
November 23, 2018
Tweet
Share
More Decks by ryota0624
See All by ryota0624
techtalk5-su
ryota0624
0
1k
kyash-meetup-vol7-suzuki.pdf
ryota0624
0
210
2019-06-01_10-10_oretoku_frontend.pdf
ryota0624
0
74
2019-03-30_11-49_architecture_night.pdf
ryota0624
0
1.6k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
130
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
Statistics for Hackers
jakevdp
796
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
BBQ
matthewcrist
85
9.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Gamification - CAS2011
davidbonilla
80
5.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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