GraphQL Admin Codegen import types throwing TS error

[daweido]

Issue summary

Using @shopify/admin-api-client with codegen. However, I have this error on my admin.generated.d.ts:

A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './admin.types' instead?ts(2846)

Before opening this issue, I have:

• Upgraded to the latest version of the relevant packages
  • @shopify/* package and version:
  • Node version:
  • Operating system:
• Set { logger: { level: LogSeverity.Debug } } in my configuration, when applicable
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

I have followed the example given from the @shopify/admin-api-client GraphQL codegen section.

When opening my the file admin.generated.d.ts I have this error:

A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './admin.types' instead?ts(2846)

I have tried changing the config to this:

import { ApiType, pluckConfig, preset } from '@shopify/api-codegen-preset';

const config = {
  // For syntax highlighting / auto-complete when writing operations
  schema: 'https://shopify.dev/admin-graphql-direct-proxy',
  documents: ['./src/**/*.ts', '!./node_modules/**'],
  projects: {
    default: {
      // For type extraction
      schema: 'https://shopify.dev/admin-graphql-direct-proxy',
      documents: ['./src/**/*.ts', '!./node_modules/**'],
      extensions: {
        codegen: {
          // Enables support for `#graphql` tags, as well as `/* GraphQL */`
          pluckConfig,
          generates: {
            './__generated__/admin.schema.json': {
              plugins: ['introspection'],
              config: { minify: true },
            },
            './__generated__/admin.types.d.ts': {
              plugins: ['typescript', 'typescript-resolvers'],
            },
            './__generated__/admin.generated.d.ts': {
              preset: {
                ...preset,
              },
              plugins: ['typescript-operations', 'typed-document-node'],
              presetConfig: {
                apiType: ApiType.Admin,
              },
              config: {
                useTypeImports: true,
              },
            },
          },
        },
      },
    },
  },
};

export default config;

Which should work, but I still have the same problem. This does not allow me to run my application. I can change it manually but I would have to do so every time I run codegen.

Expected behavior

What do you think should happen?

Having generated files which work out of the box.

Actual behavior

What actually happens?

A Typescript error on an import.

Steps to reproduce the problem

1. Create a GraphQL Query
2. Copy the codegen config using the shopifyApiProject function
3. Generate codegen
4. Open the admin.generated.d.ts.
5. Witness the TS error

[matteodepalo]

Hi @daweido, thank you for opening this issue, we'll take a look 👍

[pauldraper]

Has anybody been able to use this?

I don't get how they have...but I'm open to suggestions!

[jpaylor]

Yeah, you can temporarily get past this by manually editing the generated admin.generated.d.ts file and changing

import * as AdminTypes from './admin.types.d.ts';
to
import type * as AdminTypes from './admin.types.d.ts';

But obviously this has to be done every time the file is re-generated so its not a suitable fix.

I believe the permanent fix would be to set the config useTypeImports to true in the typescript plugin config (see https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#usetypeimports)

I could be wrong but I've had a quick look and I think this needs to be applied around here where the plugin is specified:

shopify-app-js/packages/api-clients/api-codegen-preset/src/api-types.ts

Lines 31 to 34 in 1e4f711

	[`${outputDir}/${config.typesFile}`]: {
	schema: schemaFileExists ? schemaFile : schema,
	plugins: ['typescript'],
	},

[frandiox]

This probably fixes it: Shopify/graphql-codegen#7

[frandiox]

Bumping a dependency to get the fix in this monorepo: #863