Apollo × TypeScript で 型安全なフロントエンドを開発する

Apollo Japan User Group Meetup 2020SS 1st Delivery で喋った内容です

Transcript

1. "QPMMP
   º
   5ZQF4DSJQU
   Ͱ
   ܕ҆શͳϑϩϯτΤϯυΛ։ൃ͢Δ "QPMMP
   +BQBO
   6TFS
   (SPVQ
   .FFUVQ
   44
   TU
   %FMJWFSZ  4BU
   
2. ,FJ
   'VKJLBXB !LFJ@⒎⒎ !LFJ⒎⒎ ⾣࠷ۙ
   "QPMMP
   Λ͞ΘΓ࢝Ί·ͨ͠ ⾣ීஈ͸ϦʔΨϧςοΫܥαʔϏεͷ
 ϑϩϯτΤϯυΛॻ͍ͯ·͢

   5ZQF4DSJQU
   ɾ
   3FBDU ⾣ΤϯδχΞ೥໨
3. ͲΜͳߏ੒Ͱ࢖͔ͬͨ 3&45 ⾣3&45
   "1*
   ͱ
   ΫϥΠΞϯτͷؒʹט·ͤΔ#''
   #BDLFOE
   GPS
   'SPOUFOET ⾣ΫϥΠΞϯτ͸
   ΫΤϦΛ౤͛ͯɺ3&45
   "1*
   ͔ ΒσʔλΛऔಘ͢Δ
4. εΩʔϚ͔Β
   54
   ͷܕఆٛΛࣗಈੜ੒ ⾣graphql-codegen
 (SBQI2-
   ͷεΩʔϚ͔Β
   5ZQF4DSJQU
   ͷܕఆٛϑΝΠϧΛࣗಈੜ੒
   ⾣ ϑϩϯτଆͱ
   #''
   ଆͰܕͷಉҰੑ͕อূ͞ΕΔ
   ೋॏ؅ཧ͕ෆཁ
   ⾣ 3&45
   "1*
   ͷ࣮૷Λ଴ͨͳͯ͘΋ϑϩϯτΤϯυͷ։ൃ͕͸͡ΊΒΕΔ
5. $ graphql-codegen
6. 3&45
   "1*
   ͱͷૄ௨ 3&45 ⾣apollo-datasource-rest
 "1*௨৴पΓΛΧϓηϧԽͨ͠3&45%BUB4PVSDFΫϥεΛఏڙ
 Ωϟογϡͱ͔ΤϥʔϋϯυϦϯάͷ໘౗΋Έͯ͘ΕΔ
7. ⾣ΤϯυϙΠϯτ͝ͱʹॲཧ Λੜ΍͍͚ͯ͠͹
   0,
   ⾣શϝιουڞ௨ͷઃఆ͸ XJMM4FOE3FRVFTU
   ʹॻ͘
 ΞΫηετʔΫϯͱ͔
8. ⾣Ϩεϙϯε͕Ωϟογϡ͞ΕΔ ⾣)551ϝιουؔ࿈ͷத਎
9. ⾣EBUB4PVSDFT͸
   
 DPOUFYU
   ܦ༝Ͱड͚औΕΔ
10. ⾣ͦͷ··ͩͱܕ͕͔ͭͳ͍ͷͰ
 DPEFHFOZNM
    Ͱઃఆ ⾣ࣗಈੜ੒ϑΝΠϧͷ૬ରύε Ͱ
    DPOUFYU
    ʹ౰ͯΔܕΛఆٛ
12. 6*ͱͷͭͳ͗ࠐΈ 3&45 ⾣@apollo/react-hooks
 (SBQI2-ͷΦϖϨʔγϣϯʹ൐͏σʔλͷऔಘɺϩʔσΟϯάɺ
 Τϥʔঢ়ଶͷ؅ཧ͕Մೳͳ
    )PPLT
    "1*
    Λఏڙ

13. ΫϥΠΞϯτ͔Β౤͛ΔΫΤϦΛఆٛ $ graphql-codegen
14. BQPMMP
    IPPLT
    ʹܕΛ౰ͯΔ
    ⾣ࣗಈੜ੒ͨ͠ܕΛ
    JNQPSU
    ͯ͠ɺ(FOFSJDT
    Ͱࢦఆ͢Δ͚ͩʂ
 ΫΤϦͷWBSJBCMFT
    ೖྗ
    ͱ
    EBUB
    ग़ྗ
    ʹܕ͕͖ͭ·͢ ͜Μͳ͔Μ͡ˣ
15. DPEFHFO
    ͷϓϥάΠϯΛ࢖͏ ⾣UZQFTDSJQUSFBDUBQPMMP
    Λࢦఆ ⾣XJUI)PPLT
    USVF
    Λࢦఆ $ graphql-codegen
16. DPEFHFO
    ͷϓϥάΠϯΛ࢖͏ ⾣͢Ͱʹ
    WBSJBCMFT
    ͱ
    EBUB
    ʹܕ͕͍ͭͨ
    DVTUPN
    IPPLT
    ͕
 ੜ੒͞Ε·͢
17. αϯϓϧΛ࣮૷ͯ͠ΈΔ ⾣ϖʔδͷҰ൪Լ·ͰεΫϩʔϧͨ͠Β
 ࣍ͷ݅਺ͷσʔλΛऔಘ͢Δ
18. ⾣ϖʔδͷҰ൪Լ·ͰεΫϩʔϧͨ͜͠ͱΛݕ஌͢Δ
    ⾣݁ՌҰཡͷԼʹۭͷ
    EJW
    Λઃஔ
    ⾣ۭͷ
    EJW
    ͕ը໘ʹग़ݱͨ͠ࡍʹ
 ίʔϧόοΫΛ࣮ߦ͢Δ *OUFSTFDUJPO
    0CTFSWFS
    "1*
 IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT 8FC"1**OUFSTFDUJPO@0CTFSWFS@"1*
19. ⾣PO*OUFSTFDU
    ͕ൃՐ ⾣GFUDI.PSF
    Λ࣮ߦ ⾣݁Ռͱϖʔδϯά৘ใΛ
 ߋ৽ ⾣ϖʔδͷҰ൪Լ·ͰεΫϩʔϧ OPUJGZ0O/FUXPSL4UBUVT$IBOHF
    Λ౉͢ͱ
 GFUDI.PSF
    Λ࣮ߦͨ͠ࡍʹ
    MPBEJOH
    ͕ߋ৽
 ͞ΕΔ
20. ⾣DPEFHFO
    Λ࢖ͬͯܕ҆શʹ
    (SBQI2-
    Λͭͳ͗ࠐΊΔ ⾣$VTUPN
    )PPLT
    ʹΑΔσʔλϑΣονϯά͕ศར ⾣EBUB4PVSDF
    ʹΑͬͯɺطଘͷ
    3&45
    ࢿ࢈Λे෼ʹ׆͔ͭͭ͠ ϑϩϯτΤϯυͰ
    (SBQI2-
    Λ࢖༻Ͱ͖Δ ·ͱΊ
21. ࢀߟࢿྉ ެࣜ
    %PDT
 IUUQTXXXBQPMMPHSBQIRMDPNEPDT 8IBUTBQQ
    $MPOF
    5VUPSJBM
 IUUQTXXXUPSUJMMBBDBEFNZ6SJHP 8IBUT"QQ$MPOF5VUPSJBMNBTUFS