GraphQL Fragment Colocation の話

2023年11月24日開催の「Wantedly x Qiita Meetup #1 フロントエンドのあれこれ」で話した内容です。
GraphQL Code Generator を使った GraphQL アプリケーション開発において、Fragment Colocation や Fragment Masking を使おうという内容です。

Transcript

1. ©2023 Wantedly, Inc. GraphQL fragment colocation ͷ࿩ Wantedly x Qiita Meetup #1 ϑϩϯτΤϯυͷ͋Ε͜Ε Nov 24, 2023 - Tsuyoshi Hara
2. ©2023 Wantedly, Inc. ݪ
   ߶࢜
   5TVZPTIJ
   )BSB !DIMPF 8BOUFEMZ
   *OD
   'SPOUFOE
   $IBQUFS
   -FBE
   αʔϏεάϩʔεΛ͠ͳ͕Βɺ΢ΥϯςουϦʔશମͷ ϑϩϯτΤϯυͷվળʹऔΓ૊ΜͰ͍Δɻ
   ࠷ۙͷझຯ
   #"#:.&5"-
   ࠷ۙؾʹͳ͍ͬͯΔٕज़
   (SBQI2-
   .FTI ࣗݾ঺հ
3. ©2023 Wantedly, Inc. ໨࣍  (SBQI2-
   Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
    (SBQI2-
   'SBHNFOU
   Λ࢖͓͏
    'SBHNFOU
   $PMPDBUJPO
   ͠Α͏
    'SBHNFOU
   .BTLJOH
   Λ࢖͓͏
4. ©2023 Wantedly, Inc. 'SBHNFOU
   .BTLJOH
   Λ࢖͓͏ ఻͍͑ͨ͜ͱ
5. ©2023 Wantedly, Inc. (SBQI2-
   $PEF
   (FOFSBUPS
   Λ࢖ͬͨίʔυੜ੒ͳͲͷ࿩ લఏ
6. ©2023 Wantedly, Inc. (SBQI2-
   $PEF
   (FOFSBUPS
   ͷίʔυੜ੒Λ࢖༻ લఏ ҎԼͷεϥΠυͰ͸
   (SBQI2-
   $PEF
   (FOFSBUPS
   Λ࢖ͬͨίʔυੜ੒͕લఏʹͳΓ·͢ɻ
   Ͳ͔͜Βͱ΋ͳ͘ݱΕͨม਺΍ܕ͸
   $PEF
   (FOFSBUPS
   ʹΑͬͯੜ੒͞Εͨ΋ͷͩͱࢥͬͯͩ͘ ͍͞ɻ
   (SBQI2-
   ΫϥΠΞϯτϥΠϒϥϦ͸
   "QPMMP
   Λ࢖༻͍ͯ͠·͢ɻ
7. ©2023 Wantedly, Inc. (SBQI2-
   $PEF
   (FOFSBUPS
8. ©2023 Wantedly, Inc. (SBQI2-
   $PEF
   (FOFSBUPS
9. ©2023 Wantedly, Inc. (SBQI2-
   $PEF
   (FOFSBUPS (SBQI2-
   4DIFNB 2VFSZ 5ZQF4DSJQU
   UZQFT ˞ੜ੒͞Εͨ΋ͷΛಡΈ΍͘͢Ճ޻͍ͯ͠·͢ɻ
10. ©2023 Wantedly, Inc. ໨࣍  (SBQI2-
    Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
     (SBQI2-
    'SBHNFOU
    Λ࢖͓͏
     'SBHNFOU
    $PMPDBUJPO
    ͠Α͏
     'SBHNFOU
    .BTLJOH
    Λ࢖͓͏
11. ©2023 Wantedly, Inc. ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ
12. ©2023 Wantedly, Inc. ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ
13. ©2023 Wantedly, Inc. ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ
14. ©2023 Wantedly, Inc. 1SPT$POT ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ
15. ©2023 Wantedly, Inc. 1SPT ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ $POT ݺ͹ΕΔ
    2VFSZ
    ͷશମ૾͕Ұ໨ྎવɻಡΈ΍͍͢ɻ ͲͷϑΟʔϧυ͕Ͳ͜Ͱ࢖༻͞Ε͍ͯΔ͔෼͔Βͳ͍ɻ
    ࢠίϯϙʔωϯτͷؔ৺Λ਌ίϯϙʔωϯτ͕஌͍ͬͯͳ͍ͱ͍͚ͳ͍ɻ
    ྫ͑͹ࢠίϯϙʔωϯτͰ৽͍͠σʔλͷද͕ࣔඞཁʹͳͬͨͱ͖ʹɺ਌ίϯϙʔωϯτʹॻ͔Ε͍ͯΔ
    2VFSZ
    Λम ਖ਼͢Δඞཁ͕͋Δɻ
16. ©2023 Wantedly, Inc. ໨࣍  (SBQI2-
    Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
     (SBQI2-
    'SBHNFOU
    Λ࢖͓͏
     'SBHNFOU
    $PMPDBUJPO
    ͠Α͏
     'SBHNFOU
    .BTLJOH
    Λ࢖͓͏
17. ©2023 Wantedly, Inc. (SBQI2-
    'SBHNFOU
18. ©2023 Wantedly, Inc. (SBQI2-
    'SBHNFOU
19. ©2023 Wantedly, Inc. 2VFSZ
    Λஅย
    'SBHNFOU
    ʹ
    ෼͚ͯ؅ཧ͕Ͱ͖Δ (SBQI2-
    'SBHNFOU
20. ©2023 Wantedly, Inc. (SBQI2-
    'SBHNFOU 
21. ©2023 Wantedly, Inc. ໨࣍  (SBQI2-
    Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
     (SBQI2-
    'SBHNFOU
    Λ࢖͓͏
     'SBHNFOU
    $PMPDBUJPO
    ͠Α͏
     'SBHNFOU
    .BTLJOH
    Λ࢖͓͏
22. ©2023 Wantedly, Inc. 'SBHNFOU
    $PMPDBUJPO 'SBHNFOU
    $PMPDBUJPO
23. ©2023 Wantedly, Inc. $PMPDBUF
    Ұॹʹ഑ஔ 'SBHNFOU
    $PMPDBUJPO
24. ©2023 Wantedly, Inc. 'SBHNFOU
    ͱίϯϙʔωϯτΛ
    Ұॹʹஔ͘ 'SBHNFOU
    $PMPDBUJPO
25. ©2023 Wantedly, Inc. 'SBHNFOU
    $PMPDBUJPO
26. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
27. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
28. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
29. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ ͜ͷίϯϙʔωϯτͰ ࢖ΘΕΔϑΟʔϧυΛ ఆٛͨ͠
    'SBHNFOU $PEF
    (FOFSBUPS
    ʹ Αͬͯੜ੒͞Εͨܕ
30. ©2023 Wantedly, Inc. ͪΐͬͱ͚ͩ໰୊͕ʜ 'SBHNFOU
    $PMPDBUJPO
31. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ 'SBHNFOU
    Ͱఆ͍ٛͯ͠ͳ͍ϑΟʔϧυʹ΋ ΞΫηεͰ͖ͯ͠·͏
    🤔
32. ©2023 Wantedly, Inc. ղܾࡦ 'SBHNFOU
    $PMPDBUJPO
33. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ 'SBHNFOU
    ֎ͷϑΟʔϧυ΁ΞΫηε͢Δͱ
    ܕΤϥʔͱౖͯ͠ΒΕΔɻ $PEF
    (FOFSBUPS
    ͕ੜ੒ͨ͠
    'SBHNFOU
    ʹ ରԠͨ͠ܕΛ࢖͏ɻ
34. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ (SBQI2-
    ͷੈքʹ͋Δ
    'SBHNFOU
    ͷ໊લ͕
    5ZQF4DSJQU
    ͷํʹછΈग़͖͍ͯͯͯ͠ɺ ͪΐͬͱҧ࿨ײΛײ͡Δ
    🤔
35. ©2023 Wantedly, Inc. ໨࣍  (SBQI2-
    Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
     (SBQI2-
    'SBHNFOU
    Λ࢖͓͏
     'SBHNFOU
    $PMPDBUJPO
    ͠Α͏
     'SBHNFOU
    .BTLJOH
    Λ࢖͓͏
36. ©2023 Wantedly, Inc. .BTLJOH
    ͱ͸ .FUB
    ͕ࣾ։ൃ͍ͯ͠Δ
    (SBQI2-
    ΫϥΠΞϯτͷ
    3FMBZ
    ͕ඪ४Ͱඋ͍͑ͯΔػೳɻ
    (SBQI2-
    $PEF
    (FOFSBUPS
    Ͱ΋ͦͷػೳΛ࢖ͬͨίʔυੜ੒͕Մೳɻ
    'SBHNFOU
    Ͱఆ͍ٛͯ͠ΔϑΟʔϧυҎ֎ͷϑΟʔϧυΛӅṭͯ͘͠ΕΔػೳɻ
    ݴ͍׵͑Δͱɺ͍͍ײ͡ͷܕఆٛΛੜ੒ͯ͠
    'SBHNFOU
    ֎ͷϑΟʔϧυʹΞΫηεͰ͖ͳͯ͘͘͠ΕΔػೳɻ 'SBHNFOU
    .BTLJOH
37. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ $PEF
    (FOFSBUPS
    ͕ੜ੒ͨ͠
    'SBHNFOU5ZQF
    
    ͱ͍͏ܕʹ
    'SBHNFOU
    54ͷม਺ Λ౉͢ͱɺ
    ͦͷ
    'SBHNFOU
    ʹରԠͨ͠54
    ͷܕͱೝࣝ͞ΕΔɻ GSBHNFOU3FG
    ͱ͍͏ಛघͳϑΟʔϧυʹ֨ೲ͞ Ε͍ͯΔͷͰɺ࢖͏ͨΊʹ͸
    VTF'SBHNFOU
    ͱ͍ ͏ϢʔςΟϦςΟؔ਺Λ࢖͏ඞཁ͕͋Δɻ 'SBHNFOU
    ֎ͷϑΟʔϧυΞΫηε͸ܕΤϥʔ
38. ©2023 Wantedly, Inc. མͱ݀͠ 'SBHNFOU
    .BTLJOH
39. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ ৚͖݅ͭͰ࢖༻͍ͨ͠৔߹ʹɺ&4-JOU
    ͷΤϥʔʹ ͳͬͯ͠·͏
    🤔
40. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
41. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ VTF'SBHNFOU
    ͸
    3FBDU
    IPPL
    Ͱ͸ͳ͍ ެࣜυΩϡϝϯτʹ΋஫ҙॻ͖͕ଘࡏ͍ͯ͠Δɻ
    IUUQTUIFHVJMEEFWHSBQIRMDPEFHFOQMVHJOTQSFTFUTQSFTFUDMJFOU
42. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ ੜ੒͞ΕͨίʔυΛݟΔͱɺVTF4UBUF
    ͳͲΛ࢖ͬͯ 
 ͍ͳ͍ͷͰɺ
    3FBDU
    IPPL
    Ͱ͸ͳ͍ɻ
    3FMBZ
    ͕
    VTF'SBHNFOU
    ͱ͍͏
    "1*
    Λఏڙ͍ͯ͠ΔͷͰɺ ͦͷ໊࢒Γ͔΋͠Εͳ͍ʁ
    ਪଌ
    ͜ͷؔ਺ͷ໊લ͸ઃఆϑΝΠϧͰมߋ͢Δ͜ͱ͕Ͱ͖Δɻ
43. ©2023 Wantedly, Inc. 'SBHNFOU
    Λ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ HFU'SBHNFOU%BUB
    ͱ͍͏໊લʹ͢Δͱɺ৚݅෇͖ Ͱ΋ݺ΂ΔΑ͏ʹͳΔʂ
44. ©2023 Wantedly, Inc. ·ͱΊ Conclusion
45. ©2023 Wantedly, Inc. ·ͱΊ w $PEF
    (FOFSBUPS
    Λ࢖͏ͱܕͷԸܙΛड͚ΒΕͯΑ͍ɻ
    w 'SBHNFOU
    $PMPDBUJPO
    Λ࢖͏͜ͱͰؔ৺ͷ෼཭Λ͍͍ײ͡ʹͰ͖Δɻ
    w ͨͩੜ੒͞ΕͨܕΛ͏·͘࢖Θͳ͍ͱམͱ݀͋͠ΔΑɻ
    w 'SBHNFOU
    .BTLJOH
    Ͱະવʹ๷͛Δ͜ͱ͕͋ΔΑɻ
46. ©2023 Wantedly, Inc. ࢀߟࢿྉ w (SBQI2-
    $PEF
    (FOFSBUPS
    ެࣜυΩϡϝϯτ 
 IUUQTUIFHVJMEEFWHSBQIRMDPEFHFO
    w 3FMBZ
    ެࣜυΩϡϝϯτ 
 IUUQTSFMBZEFWEPDTUVUPSJBMGSBHNFOUTTUFQDBMMVTFGSBHNFOU
    w 2VSBNZ
    ͞Μͷ
    (SBQI2-
    ॳֶऀ޲͚ࢿྉʮ$IBQUFS
    ίϩέʔγϣϯʯ 
 IUUQTHJUIVCDPN2VSBNZHRMTUVEZXPSLTIPQCMPCNBJODIBQUFST@DPMPDBUJPONE
47. ©2023 Wantedly, Inc. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ