既存Nuxt projectにgraphql-code-genを導入する
目次
- nuxtのバージョンを2.15にupdateする(nuxt 2.15からtypescriptがdefaultになっている)
install する
@graphql-codegen/cli \ # codeをgenerateするコマンド
@graphql-codegen/typescript-vue-apollo / # vue用のコードをgenerateする plugin
@graphql-codegen/typescript-operations / # typescriptの型をつくる
@graphql-codegen/typescript-document-nodes / # gql tagを作成
@graphql-codegen/typescript-graphql-files-modules /# module fileを作成
@graphql-codegen/introspection / # APIからschemaを読み込むためのplugin
@graphql-codegen/fragment-matcher/
@nuxtjs/composition-api # graphql-code-genを導入するためにはcomposition-APIを入れる必要がある
codegen.yml の設定
overwrite: true
schema: "http://localhost:8080/graphql" # graphqlのschemaを見に行く先(rails APIのエンドポイント)
documents: "graphql/**/*.graphql" # query, mutationの定義場所
generates:
graphql/generated/graphql.ts: # type, mutation, queryの作成場所
plugins:
- "typescript"
- "typescript-operations"
- "fragment-matcher"
- "typescript-vue-apollo"
graphql/graphql.schema.json: # schemaから読み取ったものをlocalにおいておく場所。(graphqlのintrospection機能)
plugins:
- "introspection"
graphql/generated/modules.d.ts: # typescriptのmodule機能?(あんまり理解はしていないです)
plugins:
- typescript-graphql-files-modules
graphql/generated/document.ts: # gql tag で囲まれたgraphql documentの作成場所
plugins:
- "typescript-document-nodes"