既存Nuxt projectにgraphql-code-genを導入する

@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"

❌ Unsupported block (embed)← Go home

既存Nuxt projectにgraphql-code-genを導入する

目次