Can I use custom schema loaders with multi-project config?

[acidoxee]

Hi there 👋

My team has several GraphQL schemas and servers split across services in a single monorepo codebase. We're not tackling federation/stitching any time soon, so those schemas are all independent from each other. More and more teams are popping their own schemas, and we'd like to centralize codegen to our monorepo's root to ease orchestration and factorization, since we still follow the same guidelines everywhere. Aside from pure API calls from our clients, our frontend app also consumes these schemas in different places.

We exclusively use custom loaders to load each schema with codegen, because:

• We have a code-first approach to developing them
• We have a complex TS setup with project references and inter-package dependencies, and couldn't really figure out yet how to make everything work with ts-node and graphql-codegen. So we leverage a lightning fast SWC build step in custom loaders to generate the schemas in JS, which is actually part of the same build process we use for our prod setup, so it's very simple. Until now, the entire codegen process never takes more than 2-3 seconds ⚡
• Last but not least, this especially makes it really easy to leverage codegen without running any live server, which is very handy locally and in CI. We never want to get back to having to run a live introspection ever again

Until now, each schema's codegen was separate, and this all worked well. But when we tried to centralize everything and use multi-project config, we were surprised to see that the root schema field of each project config did not abide by the same rules as the schema field in the extensions.codegen location. While we can use custom schema loaders in the latter, it seems we can't in the former. And since that parameter seems mandatory, we're stuck.

We've tried putting an empty value in the root schema field, like schema: '' or schema: [], and continue to define our custom loaders in the codegen extension location, but none of that seem to work. We always end up with a very vague [FAILED] Invalid Codegen Configuration! error right when starting codegen, just after the [STARTED] Parse Configuration debug message.

So a few questions here:

1. Is what we're trying to do even possible? Typings from graphql-config seem to indicate we can't use complex schema pointers with custom loaders, and giving it empty values doesn't seem to work
2. Is that simply because we have a bad config somewhere, and what we're trying to achieve is indeed possible?

For reference, here's the (reduced) multi-project config we generate with our homemade helpers:

export default {
  projects: {
    projectA: {
      schema: [],
      extensions: {
        codegen: {
          schema: {
            projectA: {
              loader:
                "/absolute/path/to/monorepo/config/codegen/schemas/loader.js",
            },
          },
          debug: true,
          verbose: true,
          generates: {
            "packages/projectA/schema.graphql": { plugins: ["schema-ast"] },
            "packages/app/src": {
              config: {
                defaultScalarType: "unknown",
                immutableTypes: true,
                namingConvention: {
                  enumValues: "change-case-all#constantCase",
                },
                scalars: {
                  DateTime: "string",
                  JSONObject: "Record<string, unknown>",
                },
                skipTypename: true,
                strictScalars: true,
                useTypeImports: true,
                dedupeOperationSuffix: true,
              },
              plugins: ["typescript-operations", "typed-document-node"],
              preset: "near-operation-file",
              presetConfig: {
                baseTypesPath: "~#graphql/projectA/__generated__/graphql",
                extension: ".ts",
                folder: "__generated__",
              },
              documents: ["packages/app/src/pages/projectA/**/*.tsx"],
            },
            "packages/app/src/graphql/projectA/__generated__": {
              config: {
                defaultScalarType: "unknown",
                immutableTypes: true,
                namingConvention: {
                  enumValues: "change-case-all#constantCase",
                },
                scalars: {
                  DateTime: "string",
                  JSONObject: "Record<string, unknown>",
                },
                skipTypename: true,
                strictScalars: true,
                useTypeImports: true,
                dedupeOperationSuffix: true,
              },
              plugins: [],
              preset: "gql-tag-operations-preset",
              presetConfig: { augmentedModuleName: "graphql-request" },
              documents: ["packages/app/src/pages/projectA/**/*.tsx"],
            },
          },
        },
      },
    },
    projectB: {
      schema: [],
      extensions: {
        codegen: {
          schema: {
            projectB: {
              loader:
                "/absolute/path/to/monorepo/config/codegen/schemas/loader.js",
            },
          },
          debug: true,
          verbose: true,
          generates: {
            "packages/projectB/schema.graphql": { plugins: ["schema-ast"] },
            "packages/app/src": {
              config: {
                defaultScalarType: "unknown",
                immutableTypes: true,
                namingConvention: {
                  enumValues: "change-case-all#constantCase",
                },
                scalars: {
                  DateTime: "string",
                  JSONObject: "Record<string, unknown>",
                },
                skipTypename: true,
                strictScalars: true,
                useTypeImports: true,
                dedupeOperationSuffix: true,
              },
              plugins: ["typescript-operations", "typed-document-node"],
              preset: "near-operation-file",
              presetConfig: {
                baseTypesPath: "~#graphql/projectB/__generated__/graphql",
                extension: ".ts",
                folder: "__generated__",
              },
              documents: ["packages/app/src/pages/projectB/**/*.tsx"],
            },
            "packages/app/src/graphql/projectB/__generated__": {
              config: {
                defaultScalarType: "unknown",
                immutableTypes: true,
                namingConvention: {
                  enumValues: "change-case-all#constantCase",
                },
                scalars: {
                  DateTime: "string",
                  JSONObject: "Record<string, unknown>",
                },
                skipTypename: true,
                strictScalars: true,
                useTypeImports: true,
                dedupeOperationSuffix: true,
              },
              plugins: [],
              preset: "gql-tag-operations-preset",
              presetConfig: { augmentedModuleName: "graphql-request" },
              documents: ["packages/app/src/pages/projectB/**/*.tsx"],
            },
          },
        },
      },
    },
  },
};

Some help would be much appreciated 🙏

[charlypoly]

Hi @acidoxee,

Just to clear out some ambiguity before digging further, when saying:

While we can use custom schema loaders in the latter, it seems we can't in the former. And since that parameter seems mandatory, we're stuck.

Do you mean mandatory when the configuration gets validated or, are the configuration types level (with codegen.ts file)?

Looking at codegen configuration handling code, it seems that schema should only be passed at the root of each project, not in extensions.codegen, otherwise it will be overwritten by schema's project root value:

Have you tried defining schema at the projects root level?

export default {
  projects: {
    projectA: {
      schema: {
         projectA: {
            loader:
               "/absolute/path/to/monorepo/config/codegen/schemas/loader.js",
        },
      },
      extensions: {
        codegen: {
          debug: true,
          verbose: true,
          generates: {
            "packages/projectA/schema.graphql": { plugins: ["schema-ast"] },
            "packages/app/src": {
              config: {
                defaultScalarType: "unknown",
                immutableTypes: true,
                namingConvention: {
                  enumValues: "change-case-all#constantCase",
                },
                scalars: {
                  DateTime: "string",
                  JSONObject: "Record<string, unknown>",
                },
                skipTypename: true,
                strictScalars: true,
                useTypeImports: true,
                dedupeOperationSuffix: true,
              },
              plugins: ["typescript-operations", "typed-document-node"],
              preset: "near-operation-file",
              presetConfig: {
                baseTypesPath: "~#graphql/projectA/__generated__/graphql",
                extension: ".ts",
                folder: "__generated__",
              },
              documents: ["packages/app/src/pages/projectA/**/*.tsx"],
            },
            "packages/app/src/graphql/projectA/__generated__": {
              config: {
                defaultScalarType: "unknown",
                immutableTypes: true,
                namingConvention: {
                  enumValues: "change-case-all#constantCase",
                },
                scalars: {
                  DateTime: "string",
                  JSONObject: "Record<string, unknown>",
                },
                skipTypename: true,
                strictScalars: true,
                useTypeImports: true,
                dedupeOperationSuffix: true,
              },
              plugins: [],
              preset: "gql-tag-operations-preset",
              presetConfig: { augmentedModuleName: "graphql-request" },
              documents: ["packages/app/src/pages/projectA/**/*.tsx"],
            },
          },
        },
      },
    },
    // ...
};

[charlypoly]

Hi @acidoxee,

Have you tried the suggested above solution? ⤴️ 👀

[acidoxee]

Hey @charlypoly, sorry I did not get back to you, I'll try your solution soon! But from memory, TS typings prevented us from using this, because the schema pointers of graphql-config are less featured than graphql-codegen's. I'll try nonetheless and keep you updated. Thanks for your help!