GraphQL, Apollo Clientと状態管理

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

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 -PDBM
   TUBUF
   ୯Ұͷίϯϙʔωϯτ಺
   ͰͷΈར༻͢ΔTUBUF (MPCBM
   TUBUF
   ෳ਺ͷίϯϙʔωϯτ
   Ͱԣஅతʹར༻͢ΔTUBUF 3FNPUF
   TUBUF
   "1*ͳͲ֎෦͔Βऔಘ͢Δ
   TUBUF
   .FUB
   TUBUF
   ࣮ߦ͞ΕΔ௨৴ͷঢ়ଶͳͲɺ
   4UBUFʹؔ͢ΔTUBUF 3PVUFS
   TUBUF
   ϒϥ΢βͷݱࡏͷ63-ͷ
   ঢ়ଶ 
10. "QPMMP
    $MJFOUͱঢ়ଶ؅ཧ w "QPMMP
    $MJFOUΛಋೖͯ͠Ұ൪ԸܙΛड͚ͨͷ͕ঢ়ଶ؅ཧͷ໘ͩͬͨ ͱࢥ͏
    w ঢ়ଶͷछྨΛ֎෦͔Βऔಘ͢ΔTUBUFΛ3FNPUF
    TUBUF
    ෳ਺ͷίϯ ϙʔωϯτͰར༻͢ΔTUBUFΛ(MPCBM
    TUBUF
    ୯Ұͷίϯϙʔωϯτ಺ ͰͷΈར༻͢ΔTUBUFΛ-PDBM
    TUBUFͱͨ͠৔߹ɺ3FNPUF
    TUBUFΛ "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. (MPCBM
    4UBUF͸Ͳ͏؅ཧ͢Δ͔ 
19. "QPMMP
    $MJFOU
    3FBDUJWF
    WBSJBCMFT✨ 
20. "QPMMP
    $MJFOU
    3FBDUJWF
    WBSJBCMFT w ϩʔΧϧͷ(MPCBM
    4UBUFΛ"QPMMP
    $MJFOUͰ؅ཧ͢Δ࢓૊Έ
    w Ωϟογϡͱ෼཭͞Ε͍ͯΔͷͰɺ(SBQI2-ߏจΛར༻ͤͣʹΞϓϦέʔγϣ ϯͷͲ͔͜ΒͰ΋σʔλͷࢀর͕Ͱ͖Δ
    w ΋ͱ΋ͱ͸3FNPUF
    TUBUFಉ༷ʹίϯϙʔωϯτ͔Βঢ়ଶΛऔಘ͢Δ৔߹ʹ RVFSZΛॻ͔ͳ͚Ε͹ͳΒͣ৑௕తͳهड़ʹͳΓ͕͕ͪͩͬͨɺ"QPMMP
    $MJFOU
    Ҏ߱ͰAVTF3FBDUJWF7BSA͕ಋೖ͞Εɺঢ়ଶͷࢀর͕γϯϓϧʹͰ͖ΔΑ͏ʹ 
21. "QPMMP
    $MJFOU
    3FBDUJWF
    WBSJBCMFT ANBLF7BSAΛ༻͍ͯঢ়ଶͷએݴΛߦ͏ 
22. "QPMMP
    $MJFOU
    3FBDUJWF
    WBSJBCMFT AVTF3FBDUJWF7BSAΛ༻͍ͨঢ়ଶͷࢀরͷίʔυ 
23. "QPMMP
    $MJFOU
    3FBDUJWF
    WBSJBCMFT ঢ়ଶͷߋ৽ 
24. VTF$POUFYUͱԿ͕ҧ͏͔ 
25. 3FBDUJWF
    7BSJBCMFTͱ$POUFYU w $POUFYUͱൺֱͨ͠৔߹ɺ3FBDUJWF7BSΛ࢖͏ͱͦͷม਺͕ؔΘΔ͢΂ͯͷΞΫςΟϒͳ ΫΤϦͷߋ৽͕τϦΨʔ͞ΕΔ͜ͱ͕େ͖ͳҧ͍ ެࣜ΋͜͜Λಛʹڧௐ͍ͯ͠Δ
    w VTF$POUFYUͰ؅ཧ͢Δͱ3FNPUF
    TUBUFΛߋ৽͢Δ৔߹ʹVTF&GGFDUͰঢ়ଶͷมߋΛݕ஌ ͯ͠࠶࣮ߦ͠ͳ͚Ε͹ͳΒͳ͍͕ɺ3FBDUJWF
    7BSJBCMFTͰ͋Ε͹ͦΕΛ·Δͬͱ"QPMMP
    $MJFOU͕؅ཧΛ͢Δɻ
    w (MPCBM
    TUBUFͷ͏ͪɺ3FNPUF
    TUBUFͱґଘؔ܎Λ࣋ͨͳ͍TUBUFͰ͋Ε͹$POUFYUͰ΋ 3FBDUJWF
    7BSJBCMFTͰ΋͍͍🧐 
26. ·ͱΊ w "QPMMP
    $MJFOUΛ࢖͏͜ͱʹΑͬͯɺ3FNPUF
    TUBUF͸"QPMMP
    $MJFOUͷΩϟογϡͰ؅ཧɻ (SBQI2-αʔόɺΩϟογϡͦΕͧΕ͔ΒͷऔಘͰهड़͕มΘΒͳ͍ͷͰɺ͋·Γҙࣝ ͢Δ͜ͱͳ͘ঢ়ଶͷ؅ཧ͕Մೳ
    w ௨৴ঢ়ଶͳͲͷ.FUB
    TUBUFʹؔͯ͠΋"QPMMP
    $MJFOUͰσϑΥϧτͰ؅ཧ͢Δ࢓૊Έ͕͋Δ
    w (MPCBM
    TUBUFʹؔͯ͠΋3FBDUJWF
    WBSJBCMFTΛར༻͢Δ͜ͱͰએݴతʹঢ়ଶͷ؅ཧ͕Մ ೳɻεΩʔϚΛ༻ҙ͢Δ͜ͱͳ͘ɺঢ়ଶͷมߋΛݕ஌ͯ͠ର৅ͷঢ়ଶ͕ؔΘΔ3FNPUF
    TUBUFͷ࠶औಘ΋ࣗಈͰߦͬͯ͘ΕΔͷͰศར