GraphQL Guide

Name: graphql-guide
Rating: 88
Author: simula-labs

命名パターン（ベストプラクティス）

タイプ	パターン	例
Fragment	`[Component][Model]Fragment`	`UserCardFragment`
Query	`[Action][Resource]Query`	`GetUsersQuery`
Mutation	`[Verb][Target]Mutation`	`CreateUserMutation`
Subscription	`[Entity]Subscription`	`UserUpdatedSubscription`

ファイル命名

code

<type>.<GraphQLName>.graphql

•type: fragment | query | mutation | subscription
•GraphQLName: PascalCaseで記述

パターン別

タイプ	パターン	例
Fragment	`fragment.<Component><Model>.graphql`	`fragment.CardTask.graphql`
Query (Get)	`query.Get<Context><Resource>.graphql`	`query.GetDetailPageCraft.graphql`
Query (Search)	`query.Search<Target>.graphql`	`query.SearchCompanies.graphql`
Mutation	`mutation.<Verb><Resource>.graphql`	`mutation.CreateTask.graphql`
Subscription	`subscription.Subscribe<Event>.graphql`	`subscription.SubscribeCraftTimeline.graphql`

コロケーションパターン

GraphQLファイルは使用するコンポーネントの近くに配置:

code

components/
└── UserCard/
    ├── index.tsx
    └── graphql/
        └── fragment.UserCard.graphql

Verb一覧（Mutation用）

Verb	用途
Create	新規作成
Update	更新
Delete	削除
Add	関連追加
Remove	関連削除
Submit	提出
Cancel	キャンセル

Fragment First

•コンポーネントが必要なデータをFragmentで定義
•親がFragmentをQuery/Mutationに埋め込み
•データの責務が明確になる

graphql

# fragment.UserCard.graphql
fragment UserCardFragment on User {
  id
  name
  avatarUrl
}

# query.GetUsers.graphql
query GetUsersQuery {
  users {
    ...UserCardFragment
  }
}