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

GraphQL Fragment Colocation の話

Tsuyoshi HARA
November 24, 2023
190

GraphQL Fragment Colocation の話

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

Tsuyoshi HARA

November 24, 2023
Tweet

Transcript

  1. ©2023 Wantedly, Inc.
    GraphQL fragment colocation ͷ࿩
    Wantedly x Qiita Meetup #1 ϑϩϯτΤϯυͷ͋Ε͜Ε
    Nov 24, 2023 - Tsuyoshi Hara

    View full-size slide

  2. ©2023 Wantedly, Inc.
    ݪ߶࢜ 5TVZPTIJ)BSB

    !DIMPF
    8BOUFEMZ *OD
    'SPOUFOE$IBQUFS-FBE
    αʔϏεάϩʔεΛ͠ͳ͕Βɺ΢ΥϯςουϦʔશମͷ
    ϑϩϯτΤϯυͷվળʹऔΓ૊ΜͰ͍Δɻ
    ࠷ۙͷझຯ#"#:.&5"-
    ࠷ۙؾʹͳ͍ͬͯΔٕज़(SBQI2-.FTI
    ࣗݾ঺հ

    View full-size slide

  3. ©2023 Wantedly, Inc.
    ໨࣍
    (SBQI2-Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
    (SBQI2-'SBHNFOUΛ࢖͓͏
    'SBHNFOU$PMPDBUJPO͠Α͏
    'SBHNFOU.BTLJOHΛ࢖͓͏

    View full-size slide

  4. ©2023 Wantedly, Inc.
    'SBHNFOU.BTLJOHΛ࢖͓͏
    ఻͍͑ͨ͜ͱ

    View full-size slide

  5. ©2023 Wantedly, Inc.
    (SBQI2-$PEF(FOFSBUPS
    Λ࢖ͬͨίʔυੜ੒ͳͲͷ࿩
    લఏ

    View full-size slide

  6. ©2023 Wantedly, Inc.
    (SBQI2-$PEF(FOFSBUPSͷίʔυੜ੒Λ࢖༻
    લఏ
    ҎԼͷεϥΠυͰ͸(SBQI2-$PEF(FOFSBUPSΛ࢖ͬͨίʔυੜ੒͕લఏʹͳΓ·͢ɻ
    Ͳ͔͜Βͱ΋ͳ͘ݱΕͨม਺΍ܕ͸$PEF(FOFSBUPSʹΑͬͯੜ੒͞Εͨ΋ͷͩͱࢥͬͯͩ͘
    ͍͞ɻ
    (SBQI2-ΫϥΠΞϯτϥΠϒϥϦ͸"QPMMPΛ࢖༻͍ͯ͠·͢ɻ

    View full-size slide

  7. ©2023 Wantedly, Inc.
    (SBQI2-$PEF(FOFSBUPS

    View full-size slide

  8. ©2023 Wantedly, Inc.
    (SBQI2-$PEF(FOFSBUPS

    View full-size slide

  9. ©2023 Wantedly, Inc.
    (SBQI2-$PEF(FOFSBUPS
    (SBQI2-4DIFNB 2VFSZ 5ZQF4DSJQUUZQFT
    ˞ੜ੒͞Εͨ΋ͷΛಡΈ΍͘͢Ճ޻͍ͯ͠·͢ɻ

    View full-size slide

  10. ©2023 Wantedly, Inc.
    ໨࣍
    (SBQI2-Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
    (SBQI2-'SBHNFOUΛ࢖͓͏
    'SBHNFOU$PMPDBUJPO͠Α͏
    'SBHNFOU.BTLJOHΛ࢖͓͏

    View full-size slide

  11. ©2023 Wantedly, Inc.
    ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  12. ©2023 Wantedly, Inc.
    ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  13. ©2023 Wantedly, Inc.
    ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  14. ©2023 Wantedly, Inc.
    1SPT$POT
    ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  15. ©2023 Wantedly, Inc.
    1SPT
    ϕʔγοΫͳ(SBQI2-ΞϓϦέʔγϣϯ
    $POT
    ݺ͹ΕΔ2VFSZͷશମ૾͕Ұ໨ྎવɻಡΈ΍͍͢ɻ
    ͲͷϑΟʔϧυ͕Ͳ͜Ͱ࢖༻͞Ε͍ͯΔ͔෼͔Βͳ͍ɻ
    ࢠίϯϙʔωϯτͷؔ৺Λ਌ίϯϙʔωϯτ͕஌͍ͬͯͳ͍ͱ͍͚ͳ͍ɻ
    ྫ͑͹ࢠίϯϙʔωϯτͰ৽͍͠σʔλͷද͕ࣔඞཁʹͳͬͨͱ͖ʹɺ਌ίϯϙʔωϯτʹॻ͔Ε͍ͯΔ2VFSZΛम
    ਖ਼͢Δඞཁ͕͋Δɻ

    View full-size slide

  16. ©2023 Wantedly, Inc.
    ໨࣍
    (SBQI2-Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
    (SBQI2-'SBHNFOUΛ࢖͓͏
    'SBHNFOU$PMPDBUJPO͠Α͏
    'SBHNFOU.BTLJOHΛ࢖͓͏

    View full-size slide

  17. ©2023 Wantedly, Inc.
    (SBQI2-'SBHNFOU

    View full-size slide

  18. ©2023 Wantedly, Inc.
    (SBQI2-'SBHNFOU

    View full-size slide

  19. ©2023 Wantedly, Inc.
    2VFSZΛஅย 'SBHNFOU
    ʹ
    ෼͚ͯ؅ཧ͕Ͱ͖Δ
    (SBQI2-'SBHNFOU

    View full-size slide

  20. ©2023 Wantedly, Inc.
    (SBQI2-'SBHNFOU

    View full-size slide

  21. ©2023 Wantedly, Inc.
    ໨࣍
    (SBQI2-Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
    (SBQI2-'SBHNFOUΛ࢖͓͏
    'SBHNFOU$PMPDBUJPO͠Α͏
    'SBHNFOU.BTLJOHΛ࢖͓͏

    View full-size slide

  22. ©2023 Wantedly, Inc.
    'SBHNFOU$PMPDBUJPO
    'SBHNFOU$PMPDBUJPO

    View full-size slide

  23. ©2023 Wantedly, Inc.
    $PMPDBUF
    Ұॹʹ഑ஔ
    'SBHNFOU$PMPDBUJPO

    View full-size slide

  24. ©2023 Wantedly, Inc.
    'SBHNFOUͱίϯϙʔωϯτΛ
    Ұॹʹஔ͘
    'SBHNFOU$PMPDBUJPO

    View full-size slide

  25. ©2023 Wantedly, Inc.
    'SBHNFOU$PMPDBUJPO

    View full-size slide

  26. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  27. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  28. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  29. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    ͜ͷίϯϙʔωϯτͰ
    ࢖ΘΕΔϑΟʔϧυΛ
    ఆٛͨ͠'SBHNFOU
    $PEF(FOFSBUPSʹ
    Αͬͯੜ੒͞Εͨܕ

    View full-size slide

  30. ©2023 Wantedly, Inc.
    ͪΐͬͱ͚ͩ໰୊͕ʜ
    'SBHNFOU$PMPDBUJPO

    View full-size slide

  31. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    'SBHNFOUͰఆ͍ٛͯ͠ͳ͍ϑΟʔϧυʹ΋
    ΞΫηεͰ͖ͯ͠·͏🤔

    View full-size slide

  32. ©2023 Wantedly, Inc.
    ղܾࡦ
    'SBHNFOU$PMPDBUJPO

    View full-size slide

  33. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    'SBHNFOU֎ͷϑΟʔϧυ΁ΞΫηε͢Δͱ
    ܕΤϥʔͱౖͯ͠ΒΕΔɻ
    $PEF(FOFSBUPS͕ੜ੒ͨ͠'SBHNFOUʹ
    ରԠͨ͠ܕΛ࢖͏ɻ

    View full-size slide

  34. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    (SBQI2-ͷੈքʹ͋Δ'SBHNFOUͷ໊લ͕
    5ZQF4DSJQUͷํʹછΈग़͖͍ͯͯͯ͠ɺ
    ͪΐͬͱҧ࿨ײΛײ͡Δ🤔

    View full-size slide

  35. ©2023 Wantedly, Inc.
    ໨࣍
    (SBQI2-Λ࢖ͬͨجຊΞϓϦέʔγϣϯ
    (SBQI2-'SBHNFOUΛ࢖͓͏
    'SBHNFOU$PMPDBUJPO͠Α͏
    'SBHNFOU.BTLJOHΛ࢖͓͏

    View full-size slide

  36. ©2023 Wantedly, Inc.
    .BTLJOHͱ͸
    .FUB͕ࣾ։ൃ͍ͯ͠Δ(SBQI2-ΫϥΠΞϯτͷ3FMBZ͕ඪ४Ͱඋ͍͑ͯΔػೳɻ
    (SBQI2-$PEF(FOFSBUPSͰ΋ͦͷػೳΛ࢖ͬͨίʔυੜ੒͕Մೳɻ
    'SBHNFOUͰఆ͍ٛͯ͠ΔϑΟʔϧυҎ֎ͷϑΟʔϧυΛӅṭͯ͘͠ΕΔػೳɻ
    ݴ͍׵͑Δͱɺ͍͍ײ͡ͷܕఆٛΛੜ੒ͯ͠'SBHNFOU֎ͷϑΟʔϧυʹΞΫηεͰ͖ͳͯ͘͘͠ΕΔػೳɻ
    'SBHNFOU.BTLJOH

    View full-size slide

  37. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    $PEF(FOFSBUPS͕ੜ੒ͨ͠'SBHNFOU5ZQF
    ͱ͍͏ܕʹ'SBHNFOU 54ͷม਺
    Λ౉͢ͱɺ
    ͦͷ'SBHNFOUʹରԠͨ͠54ͷܕͱೝࣝ͞ΕΔɻ
    GSBHNFOU3FGͱ͍͏ಛघͳϑΟʔϧυʹ֨ೲ͞
    Ε͍ͯΔͷͰɺ࢖͏ͨΊʹ͸VTF'SBHNFOUͱ͍
    ͏ϢʔςΟϦςΟؔ਺Λ࢖͏ඞཁ͕͋Δɻ
    'SBHNFOU֎ͷϑΟʔϧυΞΫηε͸ܕΤϥʔ

    View full-size slide

  38. ©2023 Wantedly, Inc.
    མͱ݀͠
    'SBHNFOU.BTLJOH

    View full-size slide

  39. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    ৚͖݅ͭͰ࢖༻͍ͨ͠৔߹ʹɺ&4-JOUͷΤϥʔʹ
    ͳͬͯ͠·͏🤔

    View full-size slide

  40. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ

    View full-size slide

  41. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    VTF'SBHNFOU͸3FBDUIPPLͰ͸ͳ͍
    ެࣜυΩϡϝϯτʹ΋஫ҙॻ͖͕ଘࡏ͍ͯ͠Δɻ
    IUUQTUIFHVJMEEFWHSBQIRMDPEFHFOQMVHJOTQSFTFUTQSFTFUDMJFOU

    View full-size slide

  42. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    ੜ੒͞ΕͨίʔυΛݟΔͱɺVTF4UBUFͳͲΛ࢖ͬͯ

    ͍ͳ͍ͷͰɺ3FBDUIPPLͰ͸ͳ͍ɻ
    3FMBZ͕VTF'SBHNFOUͱ͍͏"1*Λఏڙ͍ͯ͠ΔͷͰɺ
    ͦͷ໊࢒Γ͔΋͠Εͳ͍ʁ ਪଌ

    ͜ͷؔ਺ͷ໊લ͸ઃఆϑΝΠϧͰมߋ͢Δ͜ͱ͕Ͱ͖Δɻ

    View full-size slide

  43. ©2023 Wantedly, Inc.
    'SBHNFOUΛ࢖ͬͨ(SBQI2-ΞϓϦέʔγϣϯ
    HFU'SBHNFOU%BUBͱ͍͏໊લʹ͢Δͱɺ৚݅෇͖
    Ͱ΋ݺ΂ΔΑ͏ʹͳΔʂ

    View full-size slide

  44. ©2023 Wantedly, Inc.
    ·ͱΊ
    Conclusion

    View full-size slide

  45. ©2023 Wantedly, Inc.
    ·ͱΊ
    w $PEF(FOFSBUPSΛ࢖͏ͱܕͷԸܙΛड͚ΒΕͯΑ͍ɻ
    w 'SBHNFOU$PMPDBUJPOΛ࢖͏͜ͱͰؔ৺ͷ෼཭Λ͍͍ײ͡ʹͰ͖Δɻ
    w ͨͩੜ੒͞ΕͨܕΛ͏·͘࢖Θͳ͍ͱམͱ݀͋͠ΔΑɻ
    w 'SBHNFOU.BTLJOHͰະવʹ๷͛Δ͜ͱ͕͋ΔΑɻ

    View full-size slide

  46. ©2023 Wantedly, Inc.
    ࢀߟࢿྉ
    w (SBQI2-$PEF(FOFSBUPSެࣜυΩϡϝϯτ

    IUUQTUIFHVJMEEFWHSBQIRMDPEFHFO
    w 3FMBZެࣜυΩϡϝϯτ

    IUUQTSFMBZEFWEPDTUVUPSJBMGSBHNFOUTTUFQDBMMVTFGSBHNFOU
    w 2VSBNZ͞Μͷ(SBQI2-ॳֶऀ޲͚ࢿྉʮ$IBQUFSίϩέʔγϣϯʯ

    IUUQTHJUIVCDPN2VSBNZHRMTUVEZXPSLTIPQCMPCNBJODIBQUFST@DPMPDBUJPONE

    View full-size slide

  47. ©2023 Wantedly, Inc.
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide