実践GraphQL for クライアント側

東京Node学園祭2018での発表資料

Transcript

1. ࣮ફGraphQL for ΫϥΠΞϯταΠυ 1 @4245Ryomt ౦ژNodeֶԂࡇ2018
2. ࣗݾ঺հ ླ໦྄ଠ @4245Ryomt Fringe81גࣜձࣾ Elm / Go / Scala / TypeScript 2
3. ࠓ೔࿩Λ͢Δ͜ͱ - GraphQLͬͯͳʹʁ - GraphQLΛ࣮ફͨ͠ϓϩμΫτͷ঺հ - GraphQLʹΑͬͯղফ͞Εͨۤ͠Έ - GraphQLΛ࢖্ͬͨͰͷ޻෉ 3
4. ࠓ೔͓࣋ͪؼΓͯ͠΄͍͜͠ͱ - GraphQLΛ஌ͬͯ΋Β͏ - GraphQL৮ͬͯΈΑ͏͔ͳɻͱ͍͏޷ح৺ 4
5. ࠓ೔࿩͞ͳ͍͜ͱ - GraphQLͷࡉ͔͍࢓༷ - ಛఆϥΠϒϥϦͷ࢖͍ํ - Elmͷ͜ͱ(εϚϯʂ) 5
6. GraphQLʹ͍ͭͯ 6
7. GraphQLʹ͍ͭͯ ͲΜͳ΋ͷʁ ܕγεςϜͱͱ΋ʹ͋Δɺquery language facebook͕2015೥ʹReactͷϒϩάͰRelayͱͱ΋ʹ঺հ ͦͷ̎೥લ͔ΒAndroid, iOSͷΞϓϦͰར༻͞Ε͍ͯͨ ࠷ۙfoundation͕Ͱ͖ͨ 7
8. GraphQLʹ͍ͭͯ ͲΜͳ΋ͷʁ API༻ͷΫΤϦݴޠ HTTPͰ΍ΓͱΓ͞ΕΔ৔߹: POSTϦΫΤετͷϘσΟʹQueryΛͷͤͯ΍ΓͱΓ σʔλϑΣονʹϑΥʔΧεͨ͠࢓༷ 8
9. GraphQLʹ͍ͭͯ ͲΜͳΩʔϫʔυ͕͋Δͷ͔ εΩʔϚ, Query, Mutation, Fragment,ΤΠϦΞε, ΠϯϥΠϯϑϥάϝϯτ,σΟϨΫςΟϒ, introspection, ܕγεςϜ, ΠϯϓοτλΠϓ, ϢχΦϯλΠϓ, ΠϯλʔϑΣʔε, Non-Null, ScalarType, subscription ...etc 9
10. GraphQLʹ͍ͭͯ ࠓ೔ѻ͏Ωʔϫʔυ εΩʔϚ, Query, Mutation, Fragment,ΤΠϦΞε, ΠϯϥΠϯϑϥάϝϯτ,σΟϨΫςΟϒ, introspection, ܕγεςϜ, ΠϯϓοτλΠϓ, ϢχΦϯλΠϓ, ΠϯλʔϑΣʔε, Non-Null, ScalarType, subscription ...etc 10
11. GraphQLʹ͍ͭͯ Query / Mutation 11 GraphQLͷΤϯυϙΠϯτʹର͢Δૢ࡞ Query -> GETͰ࣮ݱ͢ΔΑ͏ͳૢ࡞ Mutation -> GETҎ֎Ͱ࣮ݱ͢ΔΑ͏ͳૢ࡞
12. GraphQLʹ͍ͭͯ Query Mutation 12 Query / Mutation
13. GraphQLʹ͍ͭͯ Query / Mutationͷ݁Ռ 13
14. GraphQLʹ͍ͭͯ ϑΟʔϧυʹ͸Ҿ਺Λ౉͢͜ͱ΋Ͱ͖Δ 14 Queryͷಛ௃
15. GraphQLʹ͍ͭͯ Queryͷಛ௃: σʔλͷؔ࿈ΛͨͲͬͯσʔλ͕ͱΕΔɻ 15
16. GraphQLʹ͍ͭͯ Queryͷಛ௃: σʔλͷؔ࿈ΛͨͲͬͯσʔλ͕ͱΕΔɻ 16 friends user job job job job RESTFulͳΒ... /users/$id ~> /users/$id/friends ~> /jobs/$id ?
17. GraphQLʹ͍ͭͯ ܕγεςϜ String, Int, Float, Boolean, List, NonNull, Enumͱ͔ interface, UnionType ObjectType 17 ObjectType ʮUserʯͷఆٛ
18. GraphQLʹ͍ͭͯ https://graphql.org 18
19. GraphQLΛ࣮ફͨ͠ϓϩμΫτͷ঺հ 19
20. GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ࠷ۙϓϨεϦϦʔε͕͞Ε·ͨ͠ - ޿ࠂ഑৴γεςϜͷ؅ཧը໘ - ޿ࠂӡ༻͢Δਓ͕࢖͏ը໘ - ΍ͨΒσʔλಉ͕࢜ؔ࿈Λ࣋ͭ 20
21. GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ࠷ۙϓϨεϦϦʔε͕͞Ε·ͨ͠ 21
22. GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ΍ͨΒσʔλಉ͕࢜ؔ࿈Λ࣋ͭ 22
23. GraphQLΛར༻ͨ͠ϓϩμΫτ(ٕज़ߏ੒) 23 ϑϩϯτΤϯυ όοΫΤϯυ File
24. ͜ͷϓϩμΫτͰGraphQLΛ࢖͓͏ͱͨ͠ϫέ 24
25. ͜ͷϓϩμΫτͰGraphQLΛ࢖͓͏ͱͨ͠ϫέ աڈͷۤ͠Έ͔Β 25
26. GraphQLʹΑͬͯղফͨۤ͠͠Έ 26
27. աڈͷϓϩμΫτͰͷۤ͠ΈͱGraphQLʹΑΔղফ ❌ αʔό,ΫϥΠΞϯτؒͷΠέͯͳ͞ ❌ σʔλऔಘͷෳࡶԽ ❌ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ 27
28. ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ `ؒ` ͱ͸ʁ 28
29. `ؒ` ͱ͸ ίϛϡχέʔγϣϯ API࢓༷ͷ΍ΓͱΓ͸୺ਖ਼ࠐΊͯ࡞ΔϚʔΫμ΢ϯͷςʔϒϧ 29 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞
30. API࢓༷ͷ΍ΓͱΓ͸୺ਖ਼ࠐΊͯ࡞ΔϚʔΫμ΢ϯͷςʔϒϧ 30 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞
31. ίϛϡχέʔγϣϯ͸GraphQLεΩʔϚத৺ʹ αʔό,ΫϥΠΞϯτؒͰڞ༗͞ΕΔυΩϡϝϯτ͸࣮ࡍͷίʔυ͔Βੜ੒ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ 31
32. GraphQLεΩʔϚத৺ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ 32 εΩʔϚ ࣗಈੜ੒υΩϡϝϯτ
33. ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ ΤϯυϙΠϯτ͕ͨ͘͞Μ Ұͭը໘Λදࣔ͢ΔͨΊʹͨ͘͞ΜͷΤϯυϙΠϯτͱ΍ΓͱΓ ϨεϙϯεΛѻ͏ίʔυ΁ͷෆ҆ 33
34. ͍ΖΜͳͱ͜΁httpͳ͛ͯϨεϙϯε Λ߹੒͍ͯ͘͠ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ 34 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ
35. ͍ΖΜͳͱ͜΁httpͳ͛ͯϨεϙϯε Λ߹੒͍ͯ͘͠ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ 35 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ
36. ෳ਺URLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯε͸ฦͬͯ͘Ε͹৴༻Ͱ͖Δ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 36
37. ෳ਺URLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯε͸ฦͬͯ͘Ε͹৴༻Ͱ͖Δ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 37
38. ෳ਺URLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯε͸ฦͬͯ͘Ε͹৴༻?Ͱ͖Δ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ʁ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 38
39. GraphQLʹ͍ͭͯ introspection ܕγεςϜͷϝλσʔλΛऔΕΔ࢓૊Έ introspection query 39
40. αʔό͔Βऔಘͨ͠σʔλΛεΩʔϚͰอূ͞ΕͨΑ͏ʹར༻Ͱ͖Δ introspectionγεςϜ͔ΒऔΓग़͢GraphQLͷܕγεςϜͷϝλσʔλͷ͓͔͛ 40 ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ
41. JSON 41 ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ αʔό ϝλσʔλ ։ൃऀ ग़ྗ πʔϧ ར༻ ιʔείʔυ ग़ྗ ҆શɾศར
42. ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 42
43. ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ σʔλऔಘͷෳࡶԽͰى͖Δ΋͏̍ͭͷଆ໘ ΤϯυϙΠϯτͷ਺͚ͩωοτϫʔΫͷߦ͖དྷ͕͔͞Ή ඞཁͷͳ͍ϑΟʔϧυ΋ૹΒΕͯ͘Δ 43
44. ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ ΤϯυϙΠϯτͷ਺͚ͩωοτϫʔΫͷߦ͖དྷ͕͔͞Ή 44
45. ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ /graphql΁ͷϦΫΤετҰൃͰཉ͍͠΋ͷ͕͢΂ͯखʹೖΔ 45
46. ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ ඞཁͷͳ͍ϑΟʔϧυ΋ૹΒΕͯ͘Δ IDͱ໊લ͚ͩ΄͍͠Α͏ͳͱ͖ʹଞͷϑΟʔϧυ·Ͱ... GraphQLͳΒ͍Βͳ͍ϑΟʔϧυ͸ૹΔͳΑ͕Ͱ͖Δʂ 46
47. աڈͷϓϩμΫτͰͷۤ͠Έͱղফ(·ͱΊ) ✅ αʔό,ΫϥΠΞϯτؒͷΠέͯͳ͞ => Schema͕ڞ௨ݴޠʹͳΔ & ίʔυ͔ΒυΩϡϝϯτ͕ੜ੒ ✅ σʔλऔಘͷෳࡶԽ => σʔλऔಘͷϦΫΤετ͸̍ͭʹ & introspectionΛ׆༻Ͱܕ҆શ ✅ σʔλऔಘͷϘτϧωοΫ => Φʔόʔϔου͸ݮΔ & ඞཁͷͳ͍ϑΟʔϧυ͸ૹΒΕͯ͜ͳ͍ 47
48. աڈͷۤ͠Έ͸GraphQLʹΑͬͯղফ͞Εͨɺ࠷ߴʁ Yes! ͚ͩͲGraphQLͰͳͯ͘΋࣮ݱͰ͖ΔΑͶɻ υΩϡϝϯτ: JSON-Schema, Swagger σʔλऔಘͷޮ཰Խ: BFF αʔό, ΫϥΠΞϯτͷอূ: αʔόΫϥΠΞϯτͰಉ͡ݴޠΛ࢖͏ 48
49. ࠔͬͨ͜ͱ΋ ϦΫΤετ͕શ෦/graphqlʹͳΔ RESTfulͳΒΤϯυϙΠϯτ͝ͱͷϨεϙϯελΠϜΛݟͯϘτϧωοΫ͕͞͠Ͱ ͖͚ͨͲͰ͖ͳ͘ͳͬͨ ΤϥʔτϥοΩϯάπʔϧ͕ग़ͯ͘͠ΕΔΑ͏ͳϢʔβͷߦಈ௥੻ͷHttpϦΫΤ ετ෦෼͕શ෦ͭͿΕΔ 49
50. ͦΕͰ΋ͳͥGraphQLʹ౿Έ੾ͬͨͷʁ GraphQL֮͑͑ͯ͞͠·͑͹΍Γ͍ͨ͜ͱ͕࣮ݱͰ͖Δ αʔόαΠυ͕ΫϥΠΞϯταΠυʹ΂ͬͨΓ͠ͳ͍ νʔϜϝϯόʹ΋GraphQL΍Γ͍ͨਓ͕͍ͨ - αʔόαΠυʹ͍ͨͷ͕޾ӡ ϒϧʔΦʔγϟϯ 50
51. ͰɺGraphQLͲ͏ͳͷʁ ࠔͬͨ͜ͱ΋͋Γͭͭɺࢼߦࡨޡ͠ͳ͕Β΍ͬͯ·͢ɻ τʔλϧͰ͸ࢫຯͷ΄͏͕ײ͡ΕͯΔͷͰΦεεϝͰ͢ɻ 51
52. GraphQLΛ࢖্ͬͨͰͷ޻෉ 52
53. GraphQLΛѻ্ͬͨͰͷ޻෉ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ ϑϥάϝϯτΛੵۃతʹ࢖͏ 53
54. GraphQLΛѻ্ͬͨͰͷ޻෉ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ ΫΤϦʔʹ͸໊લΛ͚ͭΒΕΔ ΫΤϦ͕౤͛ΒΕͨจ຺Λ໌֬ʹͰ͖Δ 54
55. GraphQLΛѻ্ͬͨͰͷ޻෉ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ 55 ͋ͬͨΒ? - ϩά͔ΒΫΤϦૹ৴ͷจ຺͕Θ͔Δ - τϥϒϧγϡʔςΟϯά - σόοά
56. GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 56
57. GraphQLʹ͍ͭͯ fragment ΫΤϦͷ࠶ར༻ੑΛߴΊΔ 57
58. GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 58 ϥΠϒϥϦӽ͠ʹΫΤϦΛ࡞͍ͬͯΔͱ๨Ε͕ͪ
59. GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 59 ΍ͬͪ·ͬͨܦݧ
60. GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 60 ؔ਺ݺͼग़͠తʹΫΤϦͷ̍෦෼ΛએݴͰ͖Δ -> ؔ਺ݺͼग़͠తʹΫΤϦΛ࡞͍ͬͯΔ͔Βڞ௨ԽͰ͖͍ͯΔ෩
61. GraphQLΛѻ্ͬͨͰͷ޻෉(·ͱΊ) 61 ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ => HTTPϦΫΤετΛૹͬͨจ຺Λ໌ࣔతʹ͢ΔͨΊ ϑϥάϝϯτΛੵۃతʹ࢖͏ => ϥΠϒϥϦӽ͠ʹGraphQLΫΤϦʔΛੜ੒ͯ͠Δͱ๨Ε͕ͪ
62. ࠷ޙʹ GraphQL͸͓͢͢Ίɻ - ΫϥΠΞϯταΠυ͸Ͳ͏͠Α͏΋ͳ͍σϝϦοτΛײͯ͡ͳ͍ - ࣍΋RESTΑΓGraphQLͷ΄͏͕͍͍ͳ͊ GraphQL͡Όͳ͍ͱͰ͖ͳ͍͜ͱ͸ͳ͍ɻ ·ͩ·ͩ໛ࡧத αʔόαΠυͷ࿩͸ͪ͜Β https://speakerdeck.com/petitviolet/real-world-graphql-on-scala 62
63. ࠷ޙʹ αʔόαΠυͷ࿩͸ͪ͜Β https://speakerdeck.com/petitviolet/real-world-graphql-on-scala 63
64. ͓͠·͍ 64