graphql client: map enum value to desired form

Question

We are using graphql-codegen on both the client and the server to handle mapping from our graphql schema to our typescript types.

We have an enum in graphql

enum Status {
  ACTIVE
  INACTIVE
  NOT_CONFIRMED
}

On the server side of the equation I was able to make use of the typescript-resolver plugin to map on and off the internal values stored in the database.

I am struggling with the client side of the equation though, where we use react-query. The documentation around enumValues is rather sparse; I have specified an enumValues in the config as so

overwrite: true
schema:
  - 'http://localhost4000/graphql'
documents: 'src/**/*.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-query'
    config:
      fetcher: graphql-request
      enumValues:
        Status: ../lib/model/Status#Status
  ./graphql.schema.json:
    plugins:
      - 'introspection'

And when I look into the generated file it imports the Status in there. But when we actually run a query that contains the status field it is returning the serialized enum value instead (eg. "ACTIVE" rather than the mapped value of "active").

score 0 · Answer 1 · answered Aug 30 '22 at 10:33

In case you need all of your enums to stay consistent as they are in graphql schema (eg all caps etc), you can add this to the codegen config file)mine is js file, hence its object-like:

  config: {
    namingConvention: {
      enumValues: 'keep',
    }
  }

graphql client: map enum value to desired form

1 Answers1