⚫︎ Colocated Fragments ( フラグメント コロケーション )

// Avatar.jsx
import gql from 'graphql-tag';

export const Avatar = ({ user }) => {
  return (
    <div>
      <a href={`/user/${user.id}`}>
        <h3>{user.name}</h3>
        <img src={user.image} />
      </a>
    </div>
  );
};

Avatar.fragments = {
  user: gql`
    fragment Avatar on User {
      id
      name
      image
    }
  `
};

https://dev.to/ricardoromox/colocated-fragments-organizing-your-graphql-queries-in-react-24a6

● @graphql-codegen/client-preset

こちらを利用すると、各種ライブラリで同様の実装パターンが実現できます。

GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する

npm install -D @graphql-codegen/client-preset

https://the-guild.dev/graphql/codegen/plugins/presets/preset-client

対応ライブラリ

React
@apollo/client (since 3.2.0, not when using React Components ())
@urql/core (since 1.15.0)
@urql/preact (since 1.4.0)
urql (since 1.11.0)
graphql-request (since 5.0.0)
react-query (with graphql-request@5.x)
swr (with graphql-request@5.x)

Vue
@vue/apollo-composable (since 4.0.0-alpha.13)
villus (since 1.0.0-beta.8)
@urql/vue (since 1.11.0)