GraphQL の Fragment という機能を最近知ったので紹介します。

Fragment って？

• クエリ内で再利用可能なフィールドの集合を定義するための機能
• フィールドセットを複数のクエリや他の Fragment 内で利用することができる

具体例

before

query Items {
  favoriteItems {
    items {
      price
      code
      name
    }
  }
  viewedItems {
    items {
      price
      code
      name
    }
  }
}

After

query Items {
  favoriteItems {
    items {
      ...ItemFields
    }
  }
  viewedItems {
    items {
      ...ItemFields
    }
  }
}

fragment ItemFields on Item {
  price
  code
  name
}

Fragment のここが便利

スキーマ定義で便利！

先程の例で一目瞭然ですが、、、

1. 再利用性 ~使い回せる~
2. 可読性 ~読みやすい~
3. 変更への柔軟性 ~変更がラク~

Co-locate Fragments

• コンポーネント内に使われる型（Fragment）を定義する
• コンポーネントで使う型と GraphQL スキーマの型定義を対応づける
• 参考）GraphQL の Fragment 活用テクニック: colocation と masking - ドワンゴ教育サービス開発者ブログ

技術雑談会で出た議論

• フラグメントの命名規則等、ルールを整備しないと Fragment が乱立してオーバーヘッドが起きてしまいそう
  • 例えば、<Component名>Fragments など
• Co-locate を活用した場合、Storybook のテストの手間が増えそう
  • Props で渡すだけだったものが、GraphQL のレスポンスをモックしなければならないようになる
  • makeFragmentDataというヘルパーが使えそう
• Apollo のuseFragmentは現在 Beta ステータスだった