graphql.ts missing DocumentTypeDecoration reference

[rupe120]

I am creating a wrapper library for use in a couple of different projects. I'm interested in using the generated client but I'm getting errors in the generated code.

I'm generating a client preset from an AWS AppSync API and the generated graphql.ts file is missing the import of DocumentTypeDecoration.

This is what my configuration looks like:

const requestConfig = {}
requestConfig[url] = {
  headers: {
    "x-api-key": apiKey
  }
};

const config: CodegenConfig = {
  overwrite: true,
  ignoreNoDocuments: true,
  schema: [
    requestConfig
  ],
  generates: {
    "src/generated/": {
      preset: 'client',
      config: {
        documentMode: 'string',
      }
    },
    './schema.graphql': {
      plugins: ['schema-ast'],
      config: {
        includeDirectives: true
      }
    }
  }
};

This is what is trying to reference that type

What might I be doing wrong?

[rupe120]

I resolved this a while ago and I don't remember exactly the issue but it appears that I was missing the required generates.plugins setting. I also decided to just generate the types as opposed to the client, but that may have just been what I got to work finally and moved on without trying generates.preset: 'client' in addition.

If that was the issue, the example at the top of the documentation page should probably be updated to include setting generates.plugins.

https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config

This is basically what my working config looks like.

const apiKey = process.env.API_KEY!;
const url = process.env.API_URL!;

const requestConfig = {}
requestConfig[url] = {
  headers: {
    "x-api-key": apiKey
  }
};

const config: CodegenConfig = {
  overwrite: true,
  documents: [
    'src/**/*.ts',
    '!src/generated/operations/**/*' // Exclude generated folder
  ],
  ignoreNoDocuments: true,
  schema: [
    requestConfig
  ],
  generates: {
    "src/generated/graphql.ts": {
      plugins: ["typescript"],
    },
    './schema.graphql': {
      plugins: ['schema-ast'],
      config: {
        includeDirectives: true
      }
    },
  }
};

export default config;

[joshuadutton]

I wrote a hook to fix this issue for me. Here's my code:

import type { CodegenConfig } from '@graphql-codegen/cli';

function fixImportsAndLint(path: string, content: string) {
  let newContent = content;
  if (!newContent.startsWith(`/* eslint-disable */`)) {
    newContent = `/* eslint-disable */\n${newContent}`;
  }
  if (path.endsWith('graphql.ts')) {
    newContent = newContent.replace(
      '/* eslint-disable */',
      `/* eslint-disable */\nimport { DocumentTypeDecoration } from '@graphql-typed-document-node/core';\n`
    );
  }
  return newContent;
}

const config: CodegenConfig = {
  schema: 'path/to/schema.graphql',
  documents: ['src/**/*.tsx'],
  ignoreNoDocuments: true,
  generates: {
    './src/graphql/generated/': {
      preset: 'client',
      config: {
        documentMode: 'string',
      },
      hooks: {
        beforeOneFileWrite: (path, content) => {
          return fixImportsAndLint(path, content);
        },
      },
    },
    './schema.graphql': {
      plugins: ['schema-ast'],
      config: {
        includeDirectives: true,
      },
    },
  },
};

export default config;

[joshuadutton]

It then added the import statement automatically once it started generating fragment and query documents, so now I have 2 and need to remove my hook.