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

目次

  • todo
  • 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"

    ❌ Unsupported block (embed)← Go home