実践GraphQL for クライアント側

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