Slide 1

Slide 1 text

αʔόʔؒ GraphQL ͱ webmock-graphql ͷ࿩ @qsona 2024-04-19 tsukiji.graphql x ϋοΧʔᲔ

Slide 2

Slide 2 text

• @qsona • Software Engineer at SHE Inc. • ։ൃ/ϓϩμΫτ૊৫ͷϦʔυΛ͍ͯ͠·͢ • ΊͬͪΌ͍͍νʔϜɾձࣾͩΑ • (࠷ۙ͋Μ·Γίʔυ͔͍ͯͳ͍͚Ͳָ͠ΜͰ·͢!) whoami

Slide 3

Slide 3 text

αʔόʔؒ API ௨৴ͯ͠·͔͢?

Slide 4

Slide 4 text

αʔόʔؒ GraphQL API ௨৴ͯ͠· ͔͢?

Slide 5

Slide 5 text

• provider ࢹ఺ • API ͷͲͷ෦෼͕࢖ΘΕ͍ͯΔ͔͕Θ͔Δ 
 => ޙํޓ׵ੑͷͳ͍มߋΛ͠΍͍͢ • ϑϩϯτ޲͚ͷ API ͱ΋ଟ͘ͷ࣮૷Λ࢖͍·ΘͤΔ • consumer ࢹ఺ • ཉ͍͠ܕͷσʔλ͕ฦͬͯ͘Δ৴པੑ͕͋Δ αʔόʔؒ GraphQL API ௨৴ͷεεϝ

Slide 6

Slide 6 text

αʔόʔؒ GraphQL API ௒ΦεεϝͰ͢!

Slide 7

Slide 7 text

• provider (server) • ͋Μ·ΓมΘΒͳ͍ • ϑϩϯτ޲͚ͱ࣮૷Λڞ௨Խͤ͞Δ৔߹͸޻෉͕͍Δ • consumer (client) • Ωϟογϡͷ؅ཧ͕جຊతʹ͸ෆཁ (ͳͷͰͦͷ෼͸ָ) • ϓϩάϥϛϯάݴޠ ... ಛʹɺ࠷ۙϑϩϯτΤϯυͰ͸ಈతܕ෇͚ݴޠ͸ 
 ͋Μ·Γ࢖ΘΕͯͳ͍͕ɺαʔόʔͰ͸࢖ΘΕ͍ͯΔ αʔόʔؒ GraphQL ͱɺ 
 ϑϩϯτ-αʔόʔ GraphQL ͷ࣮૷؍఺Ͱͷҧ͍

Slide 8

Slide 8 text

• Ruby ͷ GraphQL ΫϥΠΞϯτϥΠϒϥϦ͸ɺҰԠੈͷதʹଘࡏ͢Δ͕ • github-community-projects/graphql-client • shkan18/graphlient • ݸਓతʹ͸࢖ͬͯ΋࢖Θͳͯ͘΋Α͍ • ࢖Θͳ͍৔߹: ͨͩͷ HTTP ΫϥΠΞϯτΛͪΐͬͱ wrap ͢Δ • ࢖Θͳͯ͘΋͍͍ཧ༝ • ಈతܕ෇͚ݴޠͰ͋Δ => ܕੜ੒͕ෆཁ • ΩϟογϡϚωδϝϯτ͕ෆཁ GraphQL ΫϥΠΞϯτϥΠϒϥϦΛ࢖͏΂͖?

Slide 9

Slide 9 text

• "ܕ͸0൪໨ͷςετ" • Ruby ͸ಈతܕ෇͚ݴޠͳͷͰɺ 
 ͦͷ෼ɺࣗಈςετΛͪΌΜͱॻ͘จԽ͕ڧ͍ • ֎෦ API ݺͼग़͠Λ͍ͯ͠ΔίʔυͷςετΛͲ͏ॻ͔͘? ࣗಈςετ

Slide 10

Slide 10 text

• (1) HTTP ϨϕϧͰ stub ͢Δ • Ruby Ͱ͸ bblimke/webmock ͕ఆ൪ • stub_request(:post, url).with().to_return() • (2) API call Λϥοϓͨ͠ΫϥεΛ࡞ΓɺͦΕΛ stub ͢Δ • RSpec ͩͱ allow().to receive().and_return() ֎෦ API ݺͼग़͠ͷςετύλʔϯ

Slide 11

Slide 11 text

• [͓͢͢Ί] (1) HTTP ϨϕϧͰ stub ͢Δ • [not͓͢͢Ί] (2) API call Λϥοϓͨ͠ΫϥεΛ࡞ΓͦΕΛ stub ͢Δ • جຊతʹɺΫΤϦ͸1ϢʔεέʔεҎ֎Ͱ࢖͍ճ͞ͳ͍΄͏͕͍͍ • => ΫΤϦ͸ϢʔεέʔεʹରԠͯ͠ϕλॻ͖ͨ͠΄͏͕͍͍ • ϥοϓͨ͠ΫϥεΛ࡞Δҙຯ͸͋Μ·Γͳ͍ɺΉ͠ΖϚΠφεͩΑ ֎෦ API ݺͼग़͠ͷςετύλʔϯ

Slide 12

Slide 12 text

webmock Λ࢖͏ stub_request(:post, "another-backend.com/graphql"). with(body: { query: FooOperation::QUERY, variables: { bazId: "1" } }). to_return(body: { data: { a: 1, b: { c: 2, d: 3 } } }.to_json)

Slide 13

Slide 13 text

• ͍ΖΜͳͱ͜ΖͰ stub_request ͕ඞཁʹͳΔ • ୯ମςετ, request spec, etc... • ͦͷݺͼग़͕͠ԞͷํͰ͋Ε͹͋Δ΄Ͳ stub ͢ΔՕॴ͕૿͑Δ • ΫΤϦʹϑΟʔϧυΛ௥Ճ/࡟আͨ͠ͱ͖ɺ 
 શͯͷ stub_request Λमਖ਼͢Δඞཁ͕͋Δ • େมͩ͠ɺΑ͘๨ΕΔ => ςετͷ৴པੑ͕Լ͕Δ webmock Λ࢖͏ => ϝϯςφϯε͕ਏ͍

Slide 14

Slide 14 text

• stub ͢Δ໭Γ஋͸ςετ͝ͱʹมΘΔ͕ɺେ൒͸มΘΒͳ͍ • σϑΥϧτ͕͋Δͱ͍͍ • thoughtbot/factory_bot ͕ࢀߟʹͳΓͦ͏! • ͍ͭͰʹ stub_request पΓͷهड़ΛεοΩϦ͍ͤͨ͞ • ͭͬͨ͘ qsona/webmock-graphql ղܾࡦ

Slide 15

Slide 15 text

• factory_bot Λࢀߟʹͯ͠࡞ͬͨΑ • stub_graphql_request(:name, args) • :name ʹରԠ͢Δ stub Λొ࿥͓ͯ͘͠ webmock-graphql

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• ϝϯς΋͞Εͯͳ͍͠ README ΋ॻ͔Εͯͳ͍ • ୭͕͔ͭ͏Μ͡Ό (લ৬Ͱ͸࢖ΘΕͯΔ͸ͣ) • ͜ͷΠϕϯτ·Ͱʹ४උ͢Δ༧ఆͩͬͨͷͰ͕͢ 
 ࣌ؒͳ͔ͬͨɾɾɾ͝ΊΜͳ͍͞ɾɾɾ • ͍ͣΕʹͤΑχον͗͢ΔͷͰ͜ͷ࿩୊͸͜͜·Ͱw • ڵຯ͋Δํ࠙਌ձͰͥͻ! ޻ࣄத...

Slide 18

Slide 18 text

΋͏ҰݸωλΛ౤Լ

Slide 19

Slide 19 text

Persisted Queries ͷख๏ൺֱ @qsona 2024-04-19 tsukiji.graphql x ϋοΧʔᲔ

Slide 20

Slide 20 text

Persisted Queries ͯ͠·͔͢?

Slide 21

Slide 21 text

• ຊ൪؀ڥͰୟ͚ΔΫΤϦΛɺ૝ఆ͞Ε͍ͯΔ΋ͷ͚ͩʹ੍ݶͰ͖Δ • => ηΩϡϦςΟతͳϦεΫͷܰݮ • ϖΠϩʔυʹΫΤϦશମΛࡌͤΔඞཁ͕ͳ͘ͳΔ • hash ஋ͱ͔Ͱ΍ΓͱΓ͢Δ • => (mutation Ͱ͸ͳ͘) query ͷͱ͖͸ 
 GET ϝιου͕࣮࣭తʹ࢖͑ΔΑ͏ʹͳΓɺΩϟογϡͳͲͰ༗ར Persisted Queries ͷεεϝ

Slide 22

Slide 22 text

Persisted Queries ௒ΦεεϝͰ͢!

Slide 23

Slide 23 text

ࠓिग़ͯͨهࣄ

Slide 24

Slide 24 text

ख๏ͷൺֱ

Slide 25

Slide 25 text

• API ͷެ։ઌ͕޿͍ํ͔Βॱʹ 
 Automatic Persisted Queries > Signed Query > 
 Persisted Queries 
 ͕༗ޮͳͷͰ͸ͳ͍͔ ߟ࡯