Split typescript types from resolvers

[remko79]

I have a big set of files with different types and resolvers and for several reasons, I'd like to split up the generated typescript files for the graphql types from the resolvers, so let's say we have this schema and resolvers (very simplified):

type User {
  id: ID!
  uuid: String
  name: String
}

type UserContent {
  data1: String
  data2: String
}

type Query {
    getUser: User
    getUserContent: UserContent
}

const resolvers: Resolvers = {
  Query: {
    getUser: () => new UserModel({...}),
    getUserContent: () => new UserContent({...}),
  }
}

Now currently I generate one big file for typescript:

overwrite: true
schema:
  - 'src/graphql/**/schema.ts'
generates:
  src/generated/graphql.d.ts:
    plugins:
      - "typescript"
      - "typescript-resolvers"

But I'd like to split it, something like :

overwrite: true
schema:
  - 'src/graphql/**/schema.ts'
generates:
  src/generated/graphql_types.d.ts:
    plugins:
      - "typescript"
  src/generated/graphql_resolvers.d.ts:
    plugins:
      - "typescript-resolvers"

In this case the graphql_types.d.ts file is fine, but the graphql_resolvers.d.ts file doesn't know anything about the previously generated types, so that file is invalid. Is there any way to resolve that easily or another way to do this?

[charlypoly]

Hi @remko79,

Splitting types and resolvers types can be achieved by using the import-types-preset plugin as showcased in this working example: https://github.com/charlypoly/codegen-repros/blob/master/resolvers-import-types/codegen.ts

codegen.ts (but also works as .yml, .json or .js config)

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

const config: CodegenConfig = {
  schema: "schema.graphql",
  documents: ["src/**/*.ts"],
  generates: {
    "types.ts": {
      plugins: ["typescript"],
    },
    "resolvers-types.ts": {
      preset: "import-types-preset",
      presetConfig: {
        typesPath: "./types.js", // .js for ESM support
      },
      plugins: ["typescript-resolvers"],
    },
  },
};

export default config;

[remko79]

Thanks for the answer. After some testing and diving into the code of the import-types-preset plugin, I see that that only works if you have the "documents" set in the configuration. We're not using that, just the schema. So after more searching, I've actually found someone with exactly the same issue: https://github.com/dotansimha/graphql-code-generator/issues/5775

So adding the plugin https://www.the-guild.dev/graphql/codegen/plugins/other/add as described in that issue and the import-types-preset, it's working for me now. Thanks for the quick reply 👍