GraphCMS + Node.js - Speaker Deck

GraphCMS + Node.js

by Takashi Fujita

Slide 1

Slide 1 text

(SBQI$.4/PEF &MBTUJD#FBOTUBMLͰ؀ڥߏங /PEFֶԂ࣌ݶ໨

Slide 2

Slide 2 text

'6+*5"5BLBTIJ 'SPOUFOE8FC&OHJOFFS OBNF!UHGKU ࣗݾ঺հ (JU)VC +BWB4DSJQU (SBQI$.4/PEF

Slide 3

Slide 3 text

(SBQI$.4/PEF ࠷ۙͷ͓࢓ࣄ w ෳ਺8FCαΠτͷ؅ཧ w ϫʔΫϑϩʔվળ ฐ͕ࣾ؅ཧ͍ͯ͠Δ8FCαΠτ͸ͦΕͳΓʹ਺͕͋Γ ·ͩΤϯδχΞ͕͍ͳ͍࣌୅ʹ࡞ΒΕͨҨ࢈΋ʜ อकɾӡ༻͕൥ࡶʹͳΓ͕ͪ ϑϩϯτΤϯυʼόοΫΤϯυͷۀ຿ෛՙ

Slide 4

Slide 4 text

8PSE1SFTT͔Βͷஔ͖׵͑ w ੩తʹߏஙɾӡ༻͕Մೳͳ΋ͷ/FUMJGZ w ΦϯϥΠϯߋ৽ɾΤσΟλ͕ඞཁͳ΋ͷ w ӡ༻୲౰Λߟ͑Δͱɺ(JUͷར༻Λલఏʹ͸ग़དྷͳ͍ w +FLZMMͳͲͷδΣωϨʔλྨͰ͸೉͍͠ (SBQI$.4/PEF

Slide 5

Slide 5 text

w ϩάΠϯͯ͠ΦϯϥΠϯͰهࣄ͕ॻ͚ͯ w σϓϩΠपΓؚΊɺ؀ڥߏங͕ͳΔ΂ָ͘Ͱ w σʔλͷ*NQPSU&YQPSU΋ग़དྷΔͱྑ͍ͳ͊ʜ /FUMJGZ$.4 (IPTU ,FZTUPOF+4 (P("& 8PSE1SFTTDPN +40/"1* $SBGU$.4 #VUUFS$.4 EKBOHP$.4 FUD FUDʜ ɻɻ (SBQI$.4/PEF

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

IUUQTHSBQIDNTDPNCMPHHSBQIDNTWTXPSEQSFTTBDPNQBSJTPO

Slide 8

Slide 8 text

(SBQI2-"1*ͱ(6*ΤσΟλʂʁ ! 41" /PEFαʔό 'SPOUFOEٕज़͕׆͔͠΍͍͢ (SBQI$.4/PEF

Slide 9

Slide 9 text

(SBQI$.4

Slide 10

Slide 10 text

w (SBQI2-"1*Λ͓ؾܰ࡞੒ w (6*ͰϙνϙνͱϞσϧΛఆٛ w ίϯςϯπΛΦϯϥΠϯ(6*ΤσΟλͰ࡞੒ IUUQTHSBQIDNTDPN (SBQI$.4/PEF

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

(SBQIJ2-΋͋ΔΑ (SBQI$.4/PEF

Slide 14

Slide 14 text

(SBQI2-*%& w ϓϩδΣΫτ؅ཧ w *NQPSU&YQPSU w ΫΤϦΛอଘ w ΫΤϦཤྺ w $VTUPNIFBEFST w ؀ڥม਺GPSEZOBNJDIFBEFST (SBQI$.4/PEF

Slide 15

Slide 15 text

ඍົʹϋϚͬͨ఺ʜ w Bearerͷޙʹʮ:ʯ͸ཁΒͳ͍ w {auth_token}͡Όͳ͘{{auth_token}} (SBQI$.4/PEF

Slide 16

Slide 16 text

(SBQIDPPMͱͷҧ͍ w Ϟσϧఆ͕ٛ(6* w ίϯςϯπΤσΟλ͕༻ҙ͞Ε͍ͯΔ (SBQI$.4/PEF

Slide 17

Slide 17 text

໰୊఺ʢݱ࣌఺ʣ w .BSLEPXOͷ$PEF#MPDL ͕յΕΔ w 3JDI&EJUPSͷվߦ͕૿৩ ͢Δ (SBQI$.4ͷྑ͠ѱ͠ w (6*ʹΑΓɺ(SBQI2-Λ஌ Βͳ͍ঢ়ଶͰ΋ૢ࡞Մೳ w ͨ͘·͍͠αϙʔτ όάνέοτɾཁ๬νέοτ͸ɺ (JU)VCʹ *OUFSDPNɾ4MBDLͰؾܰʹνϟο ταϙʔτ ྑ͍ͱ͜Ζ (SBQI$.4/PEF

Slide 18

Slide 18 text

(SBQI$.4ͦͷଞ w 3PBENBQ͸࡞੒தΒ͍͠ w 8FCαΠτϦχϡʔΞϧͱಉ࣌ʹެ։ w ͦΕ·Ͱ͸͜ͷԼ෦ʹIUUQTHSBQIDNTDPNCMPHXIBUTOFXJOHSBQIDNT w ը૾Ճ޻΋Մೳʢճస΍ɺإೝࣝ΅͔͠ʣ w 8FCIPPLػೳ΋͋Δ (SBQI$.4/PEF

Slide 19

Slide 19 text

"QPMMP$MJFOU w 4FSWFSTJEFͰ࢖͏৔߹ͷ஫ҙ    global.fetch = require(‘node-fetch’)  // fetch ͕ແ͍ͱౖΒΕͪΌ͏ʼʻ ɹnpm i -S apollo-client graphql-tag (SBQI$.4/PEF

Slide 20

Slide 20 text

(SBQI$.4/PEF

Slide 21

Slide 21 text

w ߴ଎ϓϥάΠϯʢ&YQSFTTͷͱޓ׵ੑΞϦʣ w 4DIFNBϕʔε w 1JOPͰ-PHHJOH| pino-colada w ͕͔ͩ͠͠ɺະͩΛ+40/Ͱ͔͠ฦͤͣʂ (SBQI$.4/PEF

Slide 22

Slide 22 text

(SBQI$.4/PEF

Slide 23

Slide 23 text

&MBTUJD#FBOTUBML ͱ"$.Ͱ͓खܰ)5514؀ڥ (SBQI$.4/PEF

Slide 24

Slide 24 text

/PEFKT൛&# w BQQKTTFSWFSKTOQNTUBSU͕ࣗಈ&OUSZ1PJOU w /PEFKTͷόʔδϣϯΛϓϧμ΢ϯͰબ୒ w "VUPTDBMJOH w eb initͯ͠ɺeb deploy ͰσϓϩΠ w ؅ཧը໘Ͱखܰʹɺ؀ڥม਺ɾOHJOYઃఆ (SBQI$.4/PEF

Slide 25

Slide 25 text

"84$FSUJpDBUF.BOBHFS ׳ΕΕ͹෼Ͱ)5514 BENJO!EPNBJOͰϝʔϧΛड͚औΔΑ͏ʹ४උ υϝΠϯͰূ໌ॻϦΫΤετ "NB[PO͔Βϝʔϧड৴ˍঝೝ &CͷϩʔυόϥϯαʔઃఆͰܨ͙͚ͩ (SBQI$.4/PEF

Slide 26

Slide 26 text

(SBQI$.4/PEF ·ͱΊ w ϛχϚϜʹ࢝ΊΒΕΔ w (SBQI2-ͷࢼݧಋೖͱͯ͠΋༗༻ w ڊେͳϝϯςίετΛճආ w 'SPOUFOEٕज़Λ׆͔͠΍͍͢ w ։ൃɾӡ༻Λ'SPOUFOEϦιʔεͰղܾ

Slide 27

Slide 27 text

(SBQI$.4/PEF ͱ͜ΖͰʜ πΫϧόͰ͸ΤϯδχΞΛืू͍ͯ͠·͢ʂ IUUQUTVLVSVCBDPNDBSFFST

Slide 28

Slide 28 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Slide 29

Slide 29 text

(SBQI$.4/PEF ࢀߟ w IUUQTHSBQIDNTDPN w IUUQTHSBQIDNTDPNCMPHHSBQIDNTWTXPSEQSFTTBDPNQBSJTPO w IUUQTHSBQIDNTDPNCMPHXIBUTOFXJOHSBQIDNT w IUUQTHJUIVCDPNSFEPVOEHSBQIRMJEF w IUUQEFWBQPMMPEBUBDPN w IUUQTHJUIVCDPNGBTUJGZGBTUJGZ w IUUQTBXTBNB[PODPNFMBTUJDCFBOTUBML w IUUQTBXTBNB[PODPNDFSUJpDBUFNBOBHFS