Open2ヶ月前にコメント追加2

colocationとgraphql-codegenについて

GraphQL

kenbu🏠PICK/CTO

graphql-codegenメモ

ディレクトリ構造

shell

frontend/company/src/component/pages/teams/
├── teamsPage
│   ├── index.tsx
│   └── teams.graphql

こんなクエリ書いて

teams.graphql

query Teams() {
  teams() {
    ...userInfoFragment
    ...selectTeamMemberFragment
  }
}

npm run generateすると、↓のhooksが生成される

UserInfo.tsx

const { data, refetch } = useTeamsQuery()

kenbu🏠PICK/CTO

colocationを使った実装

ディレクトリ構造

shell

frontend/company/src/component/molecules/
├── selectTeam
│   ├── index.tsx
│   └── userTeams.fragment.graphql
└── userInfo
    ├── index.tsx
    └── userInfo.fragment.graphql

↓のfragment書いて、

userInfo.graphql

fragment userInfo on User {
  profileUrl
  name
}

npm run generateすると、↓のfragmentの型が生成される。Propsとして使い回すと便利。

UserInfo.tsx

type Props = {
  user: UserInfoFragment;
};

export const UserInfo = ({ user }: Props): JSX.Element => (
  <HStack>
    <Stack>
      <Image src={user.profileUrl} />
    </Stack>
    <Stack>{user.name}</Stack>
  </HStack>
);