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