[Codegen] Defining multiple schema's

[remcolakens]

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.7.1

What version of Remix are you using?

1.19.1

Issue

The codegen-unstable is a great way to generate types on the fly and speed up your development.
When staying within the Storefront API domain it works like a charm but at the moment it's not possible to expand this beyond that because you will run into multiple issue's.

Steps to reproduce:

1. Add to the root of your project a config file named: codegen.ts
2. Add the following content into the file:

import type { CodegenConfig } from '@graphql-codegen/cli';
import { pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';

const contentfulSchema = {
    'https://graphql.contentful.com/content/v1/spaces/***/environments/master':
    {
        headers: {
            Authorization: 'Bearer ***,
        },
    },
};

export default {
    overwrite: true,
    pluckConfig,
    generates: {
        'storefrontapi.generated.d.ts': {
            preset,
            schema,
            documents: ['*.{ts,tsx}', 'app/**/*.{ts,tsx}'],
          },
     'contentful.generated.d.ts': {
            preset,
            schema: contentfulSchema,
            documents: ['*.{ts,tsx}', 'app/**/*.{ts,tsx}'],
        },
    },
} as CodegenConfig;

I have removed the API key and space Id in this example, but you get the idea: I would like to make two seperate files, one with the Storefront types and one with the Contentful types (or merging them into one large file).
This feature is possible read more about it here

3. Unfortunately this feature does not work as expected with Hydrogen, it looks like the pluckConfig does some additional stuff and change the config in a way that you cannot undo. You can verify this by doing:

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

const contentfulSchema = {
    'https://graphql.contentful.com/content/v1/spaces/***/environments/master':
    {
        headers: {
            Authorization: 'Bearer ***,
        },
    },
};

export default {
  overwrite: true,
  // pluckConfig,
  generates: {
    // 'storefrontapi.generated.d.ts': {
    // 	preset,
    // 	schema,
    // 	documents: ['*.{ts,tsx}', 'app/**/*.{ts,tsx}'],
    // },
    'contentful.generated.d.ts': {
      preset,
      schema: contentfulSchema,
      documents: ['*.{ts,tsx}', 'app/**/*.{ts,tsx}'],
    },
  },
} as CodegenConfig;

As you can see I have commented out the Hydrogen part, Now the types for Contentful are working as expected but the storefront types are missing.

Expected Behavior

Just like the official implementation, you should be able to define multiple schema's.

Actual Behavior

Codegen will crash showing multiple (random) errors and not generating anything at all.

[frandiox]

Hi! Can you try changing the documents keys to exclude each other? Something like this: #707 (comment) -- You can also try the alternative I mentioned in the comments below that one if you want to mix queries in the same files.

Let me know if that works.

[remcolakens]

Thanks for the reply!

It's indeed for now the only option to split the queries into separate directories so Codegen is able to generate the type files for us.

I will share my final working config here for anyone else that ran into this issue. Feel free to use it:

import type { CodegenConfig } from '@graphql-codegen/cli';
import { pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';

const contentfulSchema = {
  [`https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}`]:
    {
      headers: {
        Authorization: `Bearer ${process.env.CONTENTFUL_ACCESS_TOKEN}`,
      },
    },
};

const eslintDisable = `/* eslint-disable eslint-comments/disable-enable-pair */\n/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */`;

export default {
  overwrite: true,
  pluckConfig,
  generates: {
    'storefrontapi.generated.d.ts': {
      schema,
      preset,
      documents: [
        'app/**/graphql/shopify/*.{ts,tsx}',
        'app/**/graphql/shopify/*/*.{ts,tsx}',
      ],
    },
    'contentful.generated.d.ts': {
      schema: contentfulSchema,
      plugins: [
        'typescript',
        'typescript-operations',
        {
          add: {
            content: eslintDisable,
          },
        },
      ],
      documents: [
        'app/**/graphql/contentful/*.{ts,tsx}',
        'app/**/graphql/contentful/*/*.{ts,tsx}',
      ],
    },
  },
} as CodegenConfig;