GraphQL Codegen Types Map

Description

This package is a plugin for the graphql-code-generator which lists all known operations and fragment entries in:

• TypeScript interface, linking operation's name with:
  • kind (subscription, mutation, query, fragment)
  • variables type
  • return data type
• [optionally] constant object (which can be used at runtime), linking operation's name with:
  • kind (subscription, mutation, query, fragment),
  • reference to corresponding DocumentNode.

where these constructs can be used as a building blocks to link all the context about a single operation/fragment just by its name.

codegen.yml

see working example of codegen.yml at packages/graphql-codegen-types-map-test/codegen.yml

overwrite: true
schema:
  - './githunt/schema.gql'
documents:
  - './githunt/**/*.graphql'

generates:
  ...
  generated/operationsMap.ts:
    hooks:
      afterOneFileWrite:
        - prettier --write
    config:
      operationsMap:
          operationTypeTemplate: "{OperationName}{OperationKind}"
          variablesTypeTemplate: '{OperationName}{OperationKind}Variables'
          operationKindTemplate: '{operationKind}'
          operationDocumentTemplate: '{OperationName}'
          importTypesFrom: './gqlTypes'
    plugins:
      - add: '/* eslint-disable */'
      - 'graphql-codegen-types-map'

Config

You can see more about each of the config value at config.ts

| config | description | |-----------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | withOperationsMap | configures whether to generate object OperationsMap interfaces. | | operationTypeTemplate | controls which name will be used to reference operations return data type (can also be imported from another file) | | variablesTypeTemplate | controls which name will be used to reference variables type (can also be imported from another file) | | operationKindTemplate | controls what string literal value will be given for the operation's kind type or what actual string value will be given for the documentsMap entry. | | operationDocumentTemplate | controls which name will be used to reference document object in the documentsMap entry | | withDocumentsMap | configures whether to generate object documentsMap constant which can be used on the runtime. | | importTypesFrom | If value is present (non undefined), then all types will be imported from this given location. | | importedTypesAlias | When values are imported from another file, importedTypesAlias describes what alias will be given for the namespace. |

defaults of these values are:

withOperationsMap: true
operationTypeTemplate: '{OperationName}{OperationKind}'
variablesTypeTemplate: '{OperationName}{OperationKind}Variables'
operationKindTemplate: '{operationKind}'
operationDocumentTemplate: '{OperationName}{OperationKind === "Fragment" ? "FragmentDoc" : "Document"}'
withDocumentsMap: true
importTypesFrom: undefined
importedTypesAlias: 'Types'

Templates

Templates (all the config values which end with suffix Template) are JavaScript literals (just ${ is replaced with { for compatibility with other file types, such as .json, .yml) and a few extra values are in the context, such as:

• variables:
  • operationKind - kind (subscription, mutation, query, fragment) of the operation
  • operationName - name of the operation
  • OperationKind - pascalCase of the operationKind
  • OperationName - pascalCase of the operationName
• casing functions provided by the change-case NPM package.

Example generated code

Example Operations map types

/* eslint-disable */
import * as Types from "./gqlTypes";

export interface QueriesMap {
  getComment: {
    operationType: Types.GetCommentQuery
    variablesType: Types.GetCommentQueryVariables
    kind: "query"
  }
  getFeed: {
    operationType: Types.GetFeedQuery
    variablesType: Types.GetFeedQueryVariables
    kind: "query"
  }
  getRepositoryContributors: {
    operationType: Types.GetRepositoryContributorsQuery
    variablesType: Types.GetRepositoryContributorsQueryVariables
    kind: "query"
  }
}

export interface MutationsMap {
  submitRepository: {
    operationType: Types.SubmitRepositoryMutation
    variablesType: Types.SubmitRepositoryMutationVariables
    kind: "mutation"
  }
  submitComment: {
    operationType: Types.SubmitCommentMutation
    variablesType: Types.SubmitCommentMutationVariables
    kind: "mutation"
  }
}

export interface SubscriptionsMap {
  onCommentAdded: {
    operationType: Types.OnCommentAddedSubscription
    variablesType: Types.OnCommentAddedSubscriptionVariables
    kind: "subscription"
  }
}

export interface FragmentsMap {
  FeedEntry: {
    operationType: Types.FeedEntryFragment
    variablesType: {}
    kind: "fragment"
  }
  RepoInfo: {
    operationType: Types.RepoInfoFragment
    variablesType: {}
    kind: "fragment"
  }
}

export interface OperationsMap
  extends FragmentsMap,
    MutationsMap,
    QueriesMap,
    SubscriptionsMap {}

Example documents map constant

export const fragmentsDocumentMap = {
  FeedEntry: { document: Types.FeedEntry, kind: "fragment" as const },
  RepoInfo: { document: Types.RepoInfo, kind: "fragment" as const },
}

export const subscriptionsDocumentMap = {
  onCommentAdded: { document: Types.OnCommentAdded, kind: "subscription" as const }
}

export const mutationsDocumentMap = {
  submitRepository: { document: Types.SubmitRepository, kind: "mutation" as const },
  submitComment: { document: Types.SubmitComment, kind: "mutation" as const },
}

export const queriesDocumentMap = {
  getComment: { document: Types.GetComment, kind: "query" as const },
  getFeed: { document: Types.GetFeed, kind: "query" as const },
  getRepositoryContributors: { document: Types.GetRepositoryContributors, kind: "query" as const }
}

export const documentsMap = {
  ...fragmentsDocumentMap,
  ...subscriptionsDocumentMap,
  ...mutationsDocumentMap,
  ...queriesDocumentMap
}

Building example code yourself

run these commands:

yarn
yarn build
yarn test

and then observe packages/graphql-codegen-types-map-test/generated/operationsMap.ts you'll see real example of generated code.