CodegenConfig.documents
from CodegenConfig
docs
#wip
documentsという命名、かなり意味がわからないmrsekut.icon
GPT-4.icon
1. documents フィールドとは？
GraphQLのqueryとかGraphQLのmutationとかが書かれているファイルを指定する
クライアント向けの型を生成するときに必要です
例: @graphql-codegen/typescript-operationsとかを使う場合。
※逆にサーバー側の型（リゾルバ型）だけ生成するなら、documentsは不要です。
---
2. 指定できる場所
ルートレベルに指定できる（基本はこちら）
出力ファイルごとにも個別に指定できる
ルートレベルに指定する例
code:ts
const config: CodegenConfig = {
schema: 'http://localhost:3000/graphql',
documents: 'src/**/*.graphql',
generates: {
'./src/types.ts': {
plugins: 'typescript', 'typescript-operations'
}
}
}
CodegenConfig.generatesにも個別に書ける
code:ts
const config: CodegenConfig = {
schema: 'http://server1.com/graphql',
generates: {
'./src/types1.ts': {
documents: 'src/**/*.graphql',
plugins: 'typescript', 'typescript-operations'
}
}
}
---
3. ドキュメントのスキャン方法
GraphQL Codegenにはドキュメントスキャナーが内蔵されていて、
.graphqlファイル
.tsx, .jsx, .ts, .jsファイル
の中からGraphQLクエリを抽出できます！
例えば .tsxファイルから探す場合：
code:ts
const config: CodegenConfig = {
schema: 'http://server1.com/graphql',
documents: 'src/**/!(*.d).{ts,tsx}'
}
---
4. documentsの指定方法一覧
table:table
指定方法 説明
:--- :---
ファイルパス './src/query.graphql'
複数ファイル ['./src/query.graphql', './src/other.graphql']
Globパターン './src/**/*.graphql'
除外（!） ['./src/**/*.graphql', '!*.generated.graphql']
コードファイル(tsx, jsx) ['./src/*.tsx'] (gqlタグ付き文字列から抽出)
直接AST文字列 ['query { f1 }', 'query { f2 }']（テスト用途）
---
5. コードファイル（tsx/jsx）からクエリを拾う場合
内部的に@grpahql-tools/graphql-tag-pluckを使って、gqlタグやマジックコメントを探します。
例：
code:tsx
const MY_QUERY = gql`
query myQuery {
getSomething {
id
}
}
`
// または
const MY_QUERY = /* GraphQL */ `
query myQuery {
getSomething {
id
}
}
`