Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL, Apollo Clientと状態管理

GraphQL, Apollo Clientと状態管理

ラクス主催フロントエンドLT大会でLTに使用した資料です。
React / Apollo Client / GraphQL / global state / Reactive Variables / State Management
https://rakus.connpass.com/event/232039/

B90a63f11581d1f064348e90ac2c9759?s=128

Ibuki KAWAMITSU

January 19, 2022
Tweet

More Decks by Ibuki KAWAMITSU

Other Decks in Technology

Transcript

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

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

    
  3. "QPMMP$MJFOUͱ͸ 

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

    
  5. ࣮ࡍͷίʔυ 

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

  7. "QPMMP$MJFOUͱঢ়ଶ؅ཧ 

  8. "QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNCMPHBQPMMPDMJFOUBSDIJUFDUVSFDMJFOUTJEFBSDIJUFDUVSFCBTJDT 

  9. "QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNCMPHBQPMMPDMJFOUBSDIJUFDUVSFDMJFOUTJEFBSDIJUFDUVSFCBTJDT -PDBMTUBUF୯Ұͷίϯϙʔωϯτ಺ ͰͷΈར༻͢ΔTUBUF (MPCBMTUBUFෳ਺ͷίϯϙʔωϯτ Ͱԣஅతʹར༻͢ΔTUBUF 3FNPUFTUBUF"1*ͳͲ֎෦͔Βऔಘ͢Δ TUBUF .FUBTUBUF࣮ߦ͞ΕΔ௨৴ͷঢ়ଶͳͲɺ 4UBUFʹؔ͢ΔTUBUF

    3PVUFSTUBUFϒϥ΢βͷݱࡏͷ63-ͷ ঢ়ଶ 
  10. "QPMMP$MJFOUͱঢ়ଶ؅ཧ w "QPMMP$MJFOUΛಋೖͯ͠Ұ൪ԸܙΛड͚ͨͷ͕ঢ়ଶ؅ཧͷ໘ͩͬͨ ͱࢥ͏ w ঢ়ଶͷछྨΛ֎෦͔Βऔಘ͢ΔTUBUFΛ3FNPUFTUBUF ෳ਺ͷίϯ ϙʔωϯτͰར༻͢ΔTUBUFΛ(MPCBMTUBUF ୯Ұͷίϯϙʔωϯτ಺ ͰͷΈར༻͢ΔTUBUFΛ-PDBMTUBUFͱͨ͠৔߹ɺ3FNPUFTUBUFΛ

    "QPMMP$MJFOUʹ͢΂ͯ೚ͤΔ͜ͱ͕Ͱ͖Δ 
  11. "QPMMP$MJFOUͱঢ়ଶ؅ཧ ग़యIUUQTXXXBQPMMPHSBQIRMDPNEPDTSFBDUMPDBMTUBUFMPDBMTUBUFNBOBHFNFOU 

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

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

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

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

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

  17. "QPMMP$MJFOUͱঢ়ଶ؅ཧ ௨৴ʹؔ͢ΔTUBUFΛRVFSZ࣮ߦ࣌ʹҰॹʹऔಘͰ͖Δ MPBEJOH FSSPS 

  18. (MPCBM4UBUF͸Ͳ͏؅ཧ͢Δ͔ 

  19. "QPMMP$MJFOU3FBDUJWFWBSJBCMFT✨ 

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

    
  21. "QPMMP$MJFOU3FBDUJWFWBSJBCMFT ANBLF7BSAΛ༻͍ͯঢ়ଶͷએݴΛߦ͏ 

  22. "QPMMP$MJFOU3FBDUJWFWBSJBCMFT AVTF3FBDUJWF7BSAΛ༻͍ͨঢ়ଶͷࢀরͷίʔυ 

  23. "QPMMP$MJFOU3FBDUJWFWBSJBCMFT ঢ়ଶͷߋ৽ 

  24. VTF$POUFYUͱԿ͕ҧ͏͔ 

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

    w (MPCBMTUBUFͷ͏ͪɺ3FNPUFTUBUFͱґଘؔ܎Λ࣋ͨͳ͍TUBUFͰ͋Ε͹$POUFYUͰ΋ 3FBDUJWF7BSJBCMFTͰ΋͍͍🧐 
  26. ·ͱΊ w "QPMMP$MJFOUΛ࢖͏͜ͱʹΑͬͯɺ3FNPUFTUBUF͸"QPMMP$MJFOUͷΩϟογϡͰ؅ཧɻ (SBQI2-αʔόɺΩϟογϡͦΕͧΕ͔ΒͷऔಘͰهड़͕มΘΒͳ͍ͷͰɺ͋·Γҙࣝ ͢Δ͜ͱͳ͘ঢ়ଶͷ؅ཧ͕Մೳ w ௨৴ঢ়ଶͳͲͷ.FUBTUBUFʹؔͯ͠΋"QPMMP$MJFOUͰσϑΥϧτͰ؅ཧ͢Δ࢓૊Έ͕͋Δ w (MPCBMTUBUFʹؔͯ͠΋3FBDUJWFWBSJBCMFTΛར༻͢Δ͜ͱͰએݴతʹঢ়ଶͷ؅ཧ͕Մ ೳɻεΩʔϚΛ༻ҙ͢Δ͜ͱͳ͘ɺঢ়ଶͷมߋΛݕ஌ͯ͠ର৅ͷঢ়ଶ͕ؔΘΔ3FNPUF

    TUBUFͷ࠶औಘ΋ࣗಈͰߦͬͯ͘ΕΔͷͰศར