GraphQL, Apollo Clientと状態管理

by Ibuki KAWAMITSU

Slide 1

Slide 1 text

͔ΘΈͭ !LBJCVLJ (SBQI2- "QPMMP$MJFOUͱঢ়ଶ؅ཧ ϑϩϯτΤϯυ-5ձWPM

Slide 2

Slide 2 text

͔ΘΈͭ גࣜձࣾ*-"#ιϑτ΢ΣΞΤϯδχΞ 506$)10*/5#*ͱ͍͏࣮ళฮ޲͚ͷσʔλ෼ੳͷ ͨΊͷ#*πʔϧΛ։ൃ͍ͯ͠·͢ ϑϩϯτΤϯυΑΓͷͳΜͰ΋԰ 3FBDU /FYUKT (SBQI2-͕޷͖ !LBJCVLJ ˣ͜͜Ͱຖ೔࢓ࣄͯ͠·͢

Slide 3

Slide 3 text

"QPMMP$MJFOUͱ͸

Slide 4

Slide 4 text

"QPMMP$MJFOU w ϩʔΧϧͱϦϞʔτͷ྆ํͷσʔλΛ(SBQI2-Ͱ؅ཧ͢Δ͜ͱ͕Ͱ͖Δ +BWB4DSJQU༻ͷแׅతͳঢ়ଶ؅ཧϥΠϒϥϦ w (SBQI2-ͷΫϥΠΞϯτ͸͋͘·ͰҰͭͷػೳɻެࣜͱͯ͠͸ঢ়ଶ؅ཧϥ ΠϒϥϦͱ͍͏͜ͱΛڧௐ͍ͯ͠Δ w BQPMMPMJOLSFTUͱ͍͏ϥΠϒϥϦͱ߹Θͤͯ࢖͏͜ͱͰ3&45ʹରͯ͠΋Ϧ ΫΤετΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ

Slide 5

Slide 5 text

࣮ࡍͷίʔυ

Slide 6

Slide 6 text

)PPLT͕༻ҙ͞Ε͍ͯΔͷͰએݴతʹ σʔλऔಘɺॻ͖ࠐΈͷϩδοΫͷهड़͕Ͱ͖Δ

Slide 7

Slide 7 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ

Slide 8

Slide 8 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNCMPHBQPMMPDMJFOUBSDIJUFDUVSFDMJFOUTJEFBSDIJUFDUVSFCBTJDT

Slide 9

Slide 9 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNCMPHBQPMMPDMJFOUBSDIJUFDUVSFDMJFOUTJEFBSDIJUFDUVSFCBTJDT -PDBMTUBUF୯Ұͷίϯϙʔωϯτ಺ ͰͷΈར༻͢ΔTUBUF (MPCBMTUBUFෳ਺ͷίϯϙʔωϯτ Ͱԣஅతʹར༻͢ΔTUBUF 3FNPUFTUBUF"1*ͳͲ֎෦͔Βऔಘ͢Δ TUBUF .FUBTUBUF࣮ߦ͞ΕΔ௨৴ͷঢ়ଶͳͲɺ 4UBUFʹؔ͢ΔTUBUF 3PVUFSTUBUFϒϥ΢βͷݱࡏͷ63-ͷ ঢ়ଶ

Slide 10

Slide 10 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ w "QPMMP$MJFOUΛಋೖͯ͠Ұ൪ԸܙΛड͚ͨͷ͕ঢ়ଶ؅ཧͷ໘ͩͬͨ ͱࢥ͏ w ঢ়ଶͷछྨΛ֎෦͔Βऔಘ͢ΔTUBUFΛ3FNPUFTUBUF ෳ਺ͷίϯ ϙʔωϯτͰར༻͢ΔTUBUFΛ(MPCBMTUBUF ୯Ұͷίϯϙʔωϯτ಺ ͰͷΈར༻͢ΔTUBUFΛ-PDBMTUBUFͱͨ͠৔߹ɺ3FNPUFTUBUFΛ "QPMMP$MJFOUʹ͢΂ͯ೚ͤΔ͜ͱ͕Ͱ͖Δ

Slide 11

Slide 11 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNEPDTSFBDUMPDBMTUBUFMPDBMTUBUFNBOBHFNFOU

Slide 12

Slide 12 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNEPDTSFBDUMPDBMTUBUFMPDBMTUBUFNBOBHFNFOU 2VFSZ͕࣮ߦ͞ΕΔͱ ·ͣ͸"QPMMP$MJFOUͷ*O.FNPSZ$BDIF ΛݟʹߦͬͯΩϟογϡσʔλ͕͋Δ͔Λ֬ೝɻ ͳ͚Ε͹(SBQI2-αʔόʹϦΫΤετ͢Δ

Slide 13

Slide 13 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNEPDTSFBDUMPDBMTUBUFMPDBMTUBUFNBOBHFNFOU ಉ͡2VFSZ͕࣮ߦ͞ΕΔͱ ࠷ॳͷ࣮ߦͰΩϟογϡ͞Εͨ σʔλΛऔಘ͢Δ

Slide 14

Slide 14 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ΫΤϦ࣮ߦޙʹ@@UZQFOBNFͱJEΛ΋ͱʹϨεϙϯεͷσʔλΛ ਖ਼نԽͯ͠Ωϟογϡʹอଘ͢Δ

Slide 15

Slide 15 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ϩάΠϯ͍ͯ͠ΔϢʔβʔΛऔಘ͢Δ2VFSZΛ࣮ߦ͢ΔIPPLTΛ༻ҙͯ͠ɺͦΕΛඞཁͳίϯϙʔωϯτ಺ Ͱ࣮ߦ͢Δ͚ͩͰϩάΠϯ͍ͯ͠ΔϢʔβʔΛऔಘͰ͖Δ

Slide 16

Slide 16 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ 0QUJPOͰGFUDI1PMJDZΛࢦఆ͢Δ͜ͱʹΑͬͯɺRVFSZͰσʔλऔಘޙʹΩϟογϡͤͣ͞ʹ ৗʹ(SBQI2-αʔό͔Β࠷৽ͷσʔλΛऔಘ͢Δ͜ͱ͕Ͱ͖Δ

Slide 17

Slide 17 text

"QPMMP$MJFOUͱঢ়ଶ؅ཧ ௨৴ʹؔ͢ΔTUBUFΛRVFSZ࣮ߦ࣌ʹҰॹʹऔಘͰ͖Δ MPBEJOH FSSPS

Slide 18

Slide 18 text

(MPCBM4UBUF͸Ͳ͏؅ཧ͢Δ͔

Slide 19

Slide 19 text

"QPMMP$MJFOU3FBDUJWFWBSJBCMFT✨

Slide 20

Slide 20 text

"QPMMP$MJFOU3FBDUJWFWBSJBCMFT w ϩʔΧϧͷ(MPCBM4UBUFΛ"QPMMP$MJFOUͰ؅ཧ͢Δ࢓૊Έ w Ωϟογϡͱ෼཭͞Ε͍ͯΔͷͰɺ(SBQI2-ߏจΛར༻ͤͣʹΞϓϦέʔγϣ ϯͷͲ͔͜ΒͰ΋σʔλͷࢀর͕Ͱ͖Δ w ΋ͱ΋ͱ͸3FNPUFTUBUFಉ༷ʹίϯϙʔωϯτ͔Βঢ়ଶΛऔಘ͢Δ৔߹ʹ RVFSZΛॻ͔ͳ͚Ε͹ͳΒͣ৑௕తͳهड़ʹͳΓ͕͕ͪͩͬͨɺ"QPMMP$MJFOU Ҏ߱ͰAVTF3FBDUJWF7BSA͕ಋೖ͞Εɺঢ়ଶͷࢀর͕γϯϓϧʹͰ͖ΔΑ͏ʹ

Slide 21

Slide 21 text

"QPMMP$MJFOU3FBDUJWFWBSJBCMFT ANBLF7BSAΛ༻͍ͯঢ়ଶͷએݴΛߦ͏

Slide 22

Slide 22 text

"QPMMP$MJFOU3FBDUJWFWBSJBCMFT AVTF3FBDUJWF7BSAΛ༻͍ͨঢ়ଶͷࢀরͷίʔυ

Slide 23

Slide 23 text

"QPMMP$MJFOU3FBDUJWFWBSJBCMFT ঢ়ଶͷߋ৽

Slide 24

Slide 24 text

VTF$POUFYUͱԿ͕ҧ͏͔

Slide 25

Slide 25 text

3FBDUJWF7BSJBCMFTͱ$POUFYU w $POUFYUͱൺֱͨ͠৔߹ɺ3FBDUJWF7BSΛ࢖͏ͱͦͷม਺͕ؔΘΔ͢΂ͯͷΞΫςΟϒͳ ΫΤϦͷߋ৽͕τϦΨʔ͞ΕΔ͜ͱ͕େ͖ͳҧ͍ ެࣜ΋͜͜Λಛʹڧௐ͍ͯ͠Δ w VTF$POUFYUͰ؅ཧ͢Δͱ3FNPUFTUBUFΛߋ৽͢Δ৔߹ʹVTF&GGFDUͰঢ়ଶͷมߋΛݕ஌ ͯ͠࠶࣮ߦ͠ͳ͚Ε͹ͳΒͳ͍͕ɺ3FBDUJWF7BSJBCMFTͰ͋Ε͹ͦΕΛ·Δͬͱ"QPMMP $MJFOU͕؅ཧΛ͢Δɻ w (MPCBMTUBUFͷ͏ͪɺ3FNPUFTUBUFͱґଘؔ܎Λ࣋ͨͳ͍TUBUFͰ͋Ε͹$POUFYUͰ΋ 3FBDUJWF7BSJBCMFTͰ΋͍͍🧐

Slide 26

Slide 26 text

·ͱΊ w "QPMMP$MJFOUΛ࢖͏͜ͱʹΑͬͯɺ3FNPUFTUBUF͸"QPMMP$MJFOUͷΩϟογϡͰ؅ཧɻ (SBQI2-αʔόɺΩϟογϡͦΕͧΕ͔ΒͷऔಘͰهड़͕มΘΒͳ͍ͷͰɺ͋·Γҙࣝ ͢Δ͜ͱͳ͘ঢ়ଶͷ؅ཧ͕Մೳ w ௨৴ঢ়ଶͳͲͷ.FUBTUBUFʹؔͯ͠΋"QPMMP$MJFOUͰσϑΥϧτͰ؅ཧ͢Δ࢓૊Έ͕͋Δ w (MPCBMTUBUFʹؔͯ͠΋3FBDUJWFWBSJBCMFTΛར༻͢Δ͜ͱͰએݴతʹঢ়ଶͷ؅ཧ͕Մ ೳɻεΩʔϚΛ༻ҙ͢Δ͜ͱͳ͘ɺঢ়ଶͷมߋΛݕ஌ͯ͠ର৅ͷঢ়ଶ͕ؔΘΔ3FNPUF TUBUFͷ࠶औಘ΋ࣗಈͰߦͬͯ͘ΕΔͷͰศར