実践GraphQL for クライアント側

51674cc4370048dd25b2e3bd148aa5f6?s=47 ryota0624
November 23, 2018
1.6k

実践GraphQL for クライアント側

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

51674cc4370048dd25b2e3bd148aa5f6?s=128

ryota0624

November 23, 2018
Tweet

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