Is it possible to codegen and consolidate all graphql queries and mutations for frontend and backend into a single file from .graphql and gql?

Question

I'm using the @graphql-codegen/cli where my confirguration is set to output to a graphql and graphql-sdk file:

  'http://localhost:8080/v1/graphql':
    headers:
      secret: "devsecret"
  'http://localhost:3000/api/auth':
    headers:
      secret: "devsecret"
documents: './**/*.graphql'
overwrite: true
generates:
  generated/graphql-sdk.ts:
    config:
      rawRequest: true
    plugins:
      - 'typescript'
      - typescript-graphql-request
      - 'typescript-operations'
      - fragment-matcher:
          apolloClientVersion: 3
          module: es2015
          useExplicitTyping: false
  generated/graphql.ts:
    config:
      reactApolloVersion: 3
      withHooks: true
      withComponent: false
      withHOC: false
      skipTypename: true
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
      - fragment-matcher:
          apolloClientVersion: 3
          module: es2015
          useExplicitTyping: false

Is it possible to merge both codegen'd configs into the same .ts file.

In addition the above both require the mutations and queries to be in *.graphql file, is there a way to make the codegen scrape .ts/.tsx files for queries (with the gql tag - like gql(...some query...)?).

I tried putting the 'documents' in an array like:

documents: ['./**/*.graphql', './**/.ts', './**/.tsx']

But it was being ignored.

score 2 · Answer 1 · answered Nov 07 '22 at 08:35

I'm Charly from The Guild, working on GraphQL Code Generator.

You could leverage the import-type-preset to share the base types between your back-end and front-end GQL types, avoiding duplication.

Example of a back-end resolvers config (resolvers-types.ts) using a shared types file (types.ts):

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;

You will find a complete and working example here: https://github.com/charlypoly/codegen-repros/tree/master/resolvers-import-types

Is it possible to codegen and consolidate all graphql queries and mutations for frontend and backend into a single file from .graphql and gql?

1 Answers1