実践GraphQL for クライアント側

by ryota0624

Slide 1

Slide 1 text

࣮ફGraphQL for ΫϥΠΞϯταΠυ 1 @4245Ryomt ౦ژNodeֶԂࡇ2018

Slide 2

Slide 2 text

ࣗݾ঺հ ླ໦྄ଠ @4245Ryomt Fringe81גࣜձࣾ Elm / Go / Scala / TypeScript 2

Slide 3

Slide 3 text

ࠓ೔࿩Λ͢Δ͜ͱ - GraphQLͬͯͳʹʁ - GraphQLΛ࣮ફͨ͠ϓϩμΫτͷ঺հ - GraphQLʹΑͬͯղফ͞Εͨۤ͠Έ - GraphQLΛ࢖্ͬͨͰͷ޻෉ 3

Slide 4

Slide 4 text

ࠓ೔͓࣋ͪؼΓͯ͠΄͍͜͠ͱ - GraphQLΛ஌ͬͯ΋Β͏ - GraphQL৮ͬͯΈΑ͏͔ͳɻͱ͍͏޷ح৺ 4

Slide 5

Slide 5 text

ࠓ೔࿩͞ͳ͍͜ͱ - GraphQLͷࡉ͔͍࢓༷ - ಛఆϥΠϒϥϦͷ࢖͍ํ - Elmͷ͜ͱ(εϚϯʂ) 5

Slide 6

Slide 6 text

GraphQLʹ͍ͭͯ 6

Slide 7

Slide 7 text

GraphQLʹ͍ͭͯ ͲΜͳ΋ͷʁ ܕγεςϜͱͱ΋ʹ͋Δɺquery language facebook͕2015೥ʹReactͷϒϩάͰRelayͱͱ΋ʹ঺հ ͦͷ̎೥લ͔ΒAndroid, iOSͷΞϓϦͰར༻͞Ε͍ͯͨ ࠷ۙfoundation͕Ͱ͖ͨ 7

Slide 8

Slide 8 text

GraphQLʹ͍ͭͯ ͲΜͳ΋ͷʁ API༻ͷΫΤϦݴޠ HTTPͰ΍ΓͱΓ͞ΕΔ৔߹: POSTϦΫΤετͷϘσΟʹQueryΛͷͤͯ΍ΓͱΓ σʔλϑΣονʹϑΥʔΧεͨ͠࢓༷ 8

Slide 9

Slide 9 text

GraphQLʹ͍ͭͯ ͲΜͳΩʔϫʔυ͕͋Δͷ͔ εΩʔϚ, Query, Mutation, Fragment,ΤΠϦΞε, ΠϯϥΠϯϑϥάϝϯτ,σΟϨΫςΟϒ, introspection, ܕγεςϜ, ΠϯϓοτλΠϓ, ϢχΦϯλΠϓ, ΠϯλʔϑΣʔε, Non-Null, ScalarType, subscription ...etc 9

Slide 10

Slide 10 text

GraphQLʹ͍ͭͯ ࠓ೔ѻ͏Ωʔϫʔυ εΩʔϚ, Query, Mutation, Fragment,ΤΠϦΞε, ΠϯϥΠϯϑϥάϝϯτ,σΟϨΫςΟϒ, introspection, ܕγεςϜ, ΠϯϓοτλΠϓ, ϢχΦϯλΠϓ, ΠϯλʔϑΣʔε, Non-Null, ScalarType, subscription ...etc 10

Slide 11

Slide 11 text

GraphQLʹ͍ͭͯ Query / Mutation 11 GraphQLͷΤϯυϙΠϯτʹର͢Δૢ࡞ Query -> GETͰ࣮ݱ͢ΔΑ͏ͳૢ࡞ Mutation -> GETҎ֎Ͱ࣮ݱ͢ΔΑ͏ͳૢ࡞

Slide 12

Slide 12 text

GraphQLʹ͍ͭͯ Query Mutation 12 Query / Mutation

Slide 13

Slide 13 text

GraphQLʹ͍ͭͯ Query / Mutationͷ݁Ռ 13

Slide 14

Slide 14 text

GraphQLʹ͍ͭͯ ϑΟʔϧυʹ͸Ҿ਺Λ౉͢͜ͱ΋Ͱ͖Δ 14 Queryͷಛ௃

Slide 15

Slide 15 text

GraphQLʹ͍ͭͯ Queryͷಛ௃: σʔλͷؔ࿈ΛͨͲͬͯσʔλ͕ͱΕΔɻ 15

Slide 16

Slide 16 text

GraphQLʹ͍ͭͯ Queryͷಛ௃: σʔλͷؔ࿈ΛͨͲͬͯσʔλ͕ͱΕΔɻ 16 friends user job job job job RESTFulͳΒ... /users/$id ~> /users/$id/friends ~> /jobs/$id ?

Slide 17

Slide 17 text

GraphQLʹ͍ͭͯ ܕγεςϜ String, Int, Float, Boolean, List, NonNull, Enumͱ͔ interface, UnionType ObjectType 17 ObjectType ʮUserʯͷఆٛ

Slide 18

Slide 18 text

GraphQLʹ͍ͭͯ https://graphql.org 18

Slide 19

Slide 19 text

GraphQLΛ࣮ફͨ͠ϓϩμΫτͷ঺հ 19

Slide 20

Slide 20 text

GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ࠷ۙϓϨεϦϦʔε͕͞Ε·ͨ͠ - ޿ࠂ഑৴γεςϜͷ؅ཧը໘ - ޿ࠂӡ༻͢Δਓ͕࢖͏ը໘ - ΍ͨΒσʔλಉ͕࢜ؔ࿈Λ࣋ͭ 20

Slide 21

Slide 21 text

GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ࠷ۙϓϨεϦϦʔε͕͞Ε·ͨ͠ 21

Slide 22

Slide 22 text

GraphQLΛར༻ͨ͠ϓϩμΫτ ͲΜͳϓϩμΫτͩͬͨͷʁ - ΍ͨΒσʔλಉ͕࢜ؔ࿈Λ࣋ͭ 22

Slide 23

Slide 23 text

GraphQLΛར༻ͨ͠ϓϩμΫτ(ٕज़ߏ੒) 23 ϑϩϯτΤϯυ όοΫΤϯυ File

Slide 24

Slide 24 text

͜ͷϓϩμΫτͰGraphQLΛ࢖͓͏ͱͨ͠ϫέ 24

Slide 25

Slide 25 text

͜ͷϓϩμΫτͰGraphQLΛ࢖͓͏ͱͨ͠ϫέ աڈͷۤ͠Έ͔Β 25

Slide 26

Slide 26 text

GraphQLʹΑͬͯղফͨۤ͠͠Έ 26

Slide 27

Slide 27 text

աڈͷϓϩμΫτͰͷۤ͠ΈͱGraphQLʹΑΔղফ ❌ αʔό,ΫϥΠΞϯτؒͷΠέͯͳ͞ ❌ σʔλऔಘͷෳࡶԽ ❌ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ 27

Slide 28

Slide 28 text

❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ `ؒ` ͱ͸ʁ 28

Slide 29

Slide 29 text

`ؒ` ͱ͸ ίϛϡχέʔγϣϯ API࢓༷ͷ΍ΓͱΓ͸୺ਖ਼ࠐΊͯ࡞ΔϚʔΫμ΢ϯͷςʔϒϧ 29 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞

Slide 30

Slide 30 text

API࢓༷ͷ΍ΓͱΓ͸୺ਖ਼ࠐΊͯ࡞ΔϚʔΫμ΢ϯͷςʔϒϧ 30 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞

Slide 31

Slide 31 text

ίϛϡχέʔγϣϯ͸GraphQLεΩʔϚத৺ʹ αʔό,ΫϥΠΞϯτؒͰڞ༗͞ΕΔυΩϡϝϯτ͸࣮ࡍͷίʔυ͔Βੜ੒ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ 31

Slide 32

Slide 32 text

GraphQLεΩʔϚத৺ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ αʔό,ΫϥΠΞϯτؒΠέͯͳ͞ 32 εΩʔϚ ࣗಈੜ੒υΩϡϝϯτ

Slide 33

Slide 33 text

❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ ΤϯυϙΠϯτ͕ͨ͘͞Μ Ұͭը໘Λදࣔ͢ΔͨΊʹͨ͘͞ΜͷΤϯυϙΠϯτͱ΍ΓͱΓ ϨεϙϯεΛѻ͏ίʔυ΁ͷෆ҆ 33

Slide 34

Slide 34 text

͍ΖΜͳͱ͜΁httpͳ͛ͯϨεϙϯε Λ߹੒͍ͯ͘͠ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ 34 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ

Slide 35

Slide 35 text

͍ΖΜͳͱ͜΁httpͳ͛ͯϨεϙϯε Λ߹੒͍ͯ͘͠ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ 35 ❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ

Slide 36

Slide 36 text

ෳ਺URLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯε͸ฦͬͯ͘Ε͹৴༻Ͱ͖Δ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 36

Slide 37

Slide 37 text

ෳ਺URLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯε͸ฦͬͯ͘Ε͹৴༻Ͱ͖Δ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 37

Slide 38

Slide 38 text

ෳ਺URLʹ·͕ͨͬͯ ϦιʔεूΊͯͨ͠ॲཧ͕Ұൃʹ Ϩεϙϯε͸ฦͬͯ͘Ε͹৴༻?Ͱ͖Δ ίʔυ͸࣮ࡍͷ΋ͷ͡Όͳͯ͘ΠϝʔδͰ͢ ✅ʁ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 38

Slide 39

Slide 39 text

GraphQLʹ͍ͭͯ introspection ܕγεςϜͷϝλσʔλΛऔΕΔ࢓૊Έ introspection query 39

Slide 40

Slide 40 text

αʔό͔Βऔಘͨ͠σʔλΛεΩʔϚͰอূ͞ΕͨΑ͏ʹར༻Ͱ͖Δ introspectionγεςϜ͔ΒऔΓग़͢GraphQLͷܕγεςϜͷϝλσʔλͷ͓͔͛ 40 ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ

Slide 41

Slide 41 text

JSON 41 ✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ αʔό ϝλσʔλ ։ൃऀ ग़ྗ πʔϧ ར༻ ιʔείʔυ ग़ྗ ҆શɾศར

Slide 42

Slide 42 text

✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷෳࡶԽ 42

Slide 43

Slide 43 text

❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ σʔλऔಘͷෳࡶԽͰى͖Δ΋͏̍ͭͷଆ໘ ΤϯυϙΠϯτͷ਺͚ͩωοτϫʔΫͷߦ͖དྷ͕͔͞Ή ඞཁͷͳ͍ϑΟʔϧυ΋ૹΒΕͯ͘Δ 43

Slide 44

Slide 44 text

❌ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ ΤϯυϙΠϯτͷ਺͚ͩωοτϫʔΫͷߦ͖དྷ͕͔͞Ή 44

Slide 45

Slide 45 text

✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ /graphql΁ͷϦΫΤετҰൃͰཉ͍͠΋ͷ͕͢΂ͯखʹೖΔ 45

Slide 46

Slide 46 text

✅ աڈͷϓϩμΫτͰͷۤ͠Έ σʔλऔಘͷύϑΥʔϚϯεϘτϧωοΫԽ ඞཁͷͳ͍ϑΟʔϧυ΋ૹΒΕͯ͘Δ IDͱ໊લ͚ͩ΄͍͠Α͏ͳͱ͖ʹଞͷϑΟʔϧυ·Ͱ... GraphQLͳΒ͍Βͳ͍ϑΟʔϧυ͸ૹΔͳΑ͕Ͱ͖Δʂ 46

Slide 47

Slide 47 text

աڈͷϓϩμΫτͰͷۤ͠Έͱղফ(·ͱΊ) ✅ αʔό,ΫϥΠΞϯτؒͷΠέͯͳ͞ => Schema͕ڞ௨ݴޠʹͳΔ & ίʔυ͔ΒυΩϡϝϯτ͕ੜ੒ ✅ σʔλऔಘͷෳࡶԽ => σʔλऔಘͷϦΫΤετ͸̍ͭʹ & introspectionΛ׆༻Ͱܕ҆શ ✅ σʔλऔಘͷϘτϧωοΫ => Φʔόʔϔου͸ݮΔ & ඞཁͷͳ͍ϑΟʔϧυ͸ૹΒΕͯ͜ͳ͍ 47

Slide 48

Slide 48 text

աڈͷۤ͠Έ͸GraphQLʹΑͬͯղফ͞Εͨɺ࠷ߴʁ Yes! ͚ͩͲGraphQLͰͳͯ͘΋࣮ݱͰ͖ΔΑͶɻ υΩϡϝϯτ: JSON-Schema, Swagger σʔλऔಘͷޮ཰Խ: BFF αʔό, ΫϥΠΞϯτͷอূ: αʔόΫϥΠΞϯτͰಉ͡ݴޠΛ࢖͏ 48

Slide 49

Slide 49 text

ࠔͬͨ͜ͱ΋ ϦΫΤετ͕શ෦/graphqlʹͳΔ RESTfulͳΒΤϯυϙΠϯτ͝ͱͷϨεϙϯελΠϜΛݟͯϘτϧωοΫ͕͞͠Ͱ ͖͚ͨͲͰ͖ͳ͘ͳͬͨ ΤϥʔτϥοΩϯάπʔϧ͕ग़ͯ͘͠ΕΔΑ͏ͳϢʔβͷߦಈ௥੻ͷHttpϦΫΤ ετ෦෼͕શ෦ͭͿΕΔ 49

Slide 50

Slide 50 text

ͦΕͰ΋ͳͥGraphQLʹ౿Έ੾ͬͨͷʁ GraphQL֮͑͑ͯ͞͠·͑͹΍Γ͍ͨ͜ͱ͕࣮ݱͰ͖Δ αʔόαΠυ͕ΫϥΠΞϯταΠυʹ΂ͬͨΓ͠ͳ͍ νʔϜϝϯόʹ΋GraphQL΍Γ͍ͨਓ͕͍ͨ - αʔόαΠυʹ͍ͨͷ͕޾ӡ ϒϧʔΦʔγϟϯ 50

Slide 51

Slide 51 text

ͰɺGraphQLͲ͏ͳͷʁ ࠔͬͨ͜ͱ΋͋Γͭͭɺࢼߦࡨޡ͠ͳ͕Β΍ͬͯ·͢ɻ τʔλϧͰ͸ࢫຯͷ΄͏͕ײ͡ΕͯΔͷͰΦεεϝͰ͢ɻ 51

Slide 52

Slide 52 text

GraphQLΛ࢖্ͬͨͰͷ޻෉ 52

Slide 53

Slide 53 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ ϑϥάϝϯτΛੵۃతʹ࢖͏ 53

Slide 54

Slide 54 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ ΫΤϦʔʹ͸໊લΛ͚ͭΒΕΔ ΫΤϦ͕౤͛ΒΕͨจ຺Λ໌֬ʹͰ͖Δ 54

Slide 55

Slide 55 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ 55 ͋ͬͨΒ? - ϩά͔ΒΫΤϦૹ৴ͷจ຺͕Θ͔Δ - τϥϒϧγϡʔςΟϯά - σόοά

Slide 56

Slide 56 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 56

Slide 57

Slide 57 text

GraphQLʹ͍ͭͯ fragment ΫΤϦͷ࠶ར༻ੑΛߴΊΔ 57

Slide 58

Slide 58 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 58 ϥΠϒϥϦӽ͠ʹΫΤϦΛ࡞͍ͬͯΔͱ๨Ε͕ͪ

Slide 59

Slide 59 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 59 ΍ͬͪ·ͬͨܦݧ

Slide 60

Slide 60 text

GraphQLΛѻ্ͬͨͰͷ޻෉ ϑϥάϝϯτΛੵۃతʹ࢖͏ 60 ؔ਺ݺͼग़͠తʹΫΤϦͷ̍෦෼ΛએݴͰ͖Δ -> ؔ਺ݺͼग़͠తʹΫΤϦΛ࡞͍ͬͯΔ͔Βڞ௨ԽͰ͖͍ͯΔ෩

Slide 61

Slide 61 text

GraphQLΛѻ্ͬͨͰͷ޻෉(·ͱΊ) 61 ΫΤϦʔ/ϛϡʔςʔγϣϯʹ͸໊લΛ͚ͭΔ => HTTPϦΫΤετΛૹͬͨจ຺Λ໌ࣔతʹ͢ΔͨΊ ϑϥάϝϯτΛੵۃతʹ࢖͏ => ϥΠϒϥϦӽ͠ʹGraphQLΫΤϦʔΛੜ੒ͯ͠Δͱ๨Ε͕ͪ

Slide 62

Slide 62 text

࠷ޙʹ GraphQL͸͓͢͢Ίɻ - ΫϥΠΞϯταΠυ͸Ͳ͏͠Α͏΋ͳ͍σϝϦοτΛײͯ͡ͳ͍ - ࣍΋RESTΑΓGraphQLͷ΄͏͕͍͍ͳ͊ GraphQL͡Όͳ͍ͱͰ͖ͳ͍͜ͱ͸ͳ͍ɻ ·ͩ·ͩ໛ࡧத αʔόαΠυͷ࿩͸ͪ͜Β https://speakerdeck.com/petitviolet/real-world-graphql-on-scala 62

Slide 63

Slide 63 text

࠷ޙʹ αʔόαΠυͷ࿩͸ͪ͜Β https://speakerdeck.com/petitviolet/real-world-graphql-on-scala 63

Slide 64

Slide 64 text

͓͠·͍ 64