GraphQL Codegenで自動生成されたファイルでNamed export 'gql' not foundのビルドエラーを回避する

Thu, 10 Apr 2025 08:00:00 +0900

Vite + Apollo Client + GraphQL Codegenの組み合わせでgraphql-codegenを実行すると、gql関数を以下のようにimportするためにエラーが出る。

import { gql } from '@apollo/client';

[vite] Named export 'gql' not found. The requested module '@apollo/client' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@apollo/client';
const {gql} = pkg;

解決方法としては graphql-codegenの設定ファイルにgqlImportの設定を追加して再度コード生成する。

const config: CodegenConfig = {
  ...
  generates: {
  ...
    ".": {
      config: {
        gqlImport: "@apollo/client/core#gql",
      },
    },
  },

そうすると import { gql } from '@apollo/client/core'; が生成されるのでビルドエラーが回避できた 🎉

GraphQL on oinume journal

GraphQL Codegenで自動生成されたファイルでNamed export 'gql' not foundのビルドエラーを回避する