Tips for maintaining enum order in graphql

Question

Tips for maintaining enum order in graphql

In the server, I have defined an enum called BlocksType.

export enum BlocksType {
    TEXT = "TEXT",
    LINK = "LINK",
    GALLERY = "GALLERY",
    CONTACT = "CONTACT",
    EMAIL = "EMAIL",
    RESIDENCE = "RESIDENCE",
    SNS = "SNS",
}

The ordering of types is important, with TEXT being the first and SNS being the last. (This order must be maintained.)

However, when generated in the client through codegen, the enum appears in alphabetical order:

export enum BlocksType {
  CONTACT = "CONTACT",
  EMAIL = "EMAIL",
  GALLERY = "GALLERY",
  LINK = "LINK",
  RESIDENCE = "RESIDENCE",
  SNS = "SNS",
  TEXT = "TEXT",
}

This raises the question of how to maintain the same order as defined in the server on the client side.

typescript enums typegraphql

Answer 1

Answer №1

Consider trying this approach

If you happen to be utilizing graphql-code-generator, a recommendation from this fellow contributor proposes opting for a Query structure to ensure data is presented in the correct sequence, as there's no guarantee that Object.values() will consistently maintain order.

In your particular scenario, something similar to the following can be implemented.

type Query {
  blockTypes: [BlockType!]!
}

The answer you've been seeking

Given the caveat regarding Object.values(), it may generally be safe (although not foolproof) to simply turn off sorting:

# codegen.yml
schema: "schema.graphql"
config:
  sort: false
...

// codegen.ts
export default {
  schema: 'schema.graphql',
  config: {
    ...
    sort: false,
  },
  ...
};

Remember that disabling sorting will impact the arrangement of all generated schemas and type files, but in my experience, this adjustment doesn't lead to any negative repercussions.

Answer 2

Consider trying this approach

If you happen to be utilizing graphql-code-generator, a recommendation from this fellow contributor proposes opting for a Query structure to ensure data is presented in the correct sequence, as there's no guarantee that Object.values() will consistently maintain order.

In your particular scenario, something similar to the following can be implemented.

type Query {
  blockTypes: [BlockType!]!
}

The answer you've been seeking

Given the caveat regarding Object.values(), it may generally be safe (although not foolproof) to simply turn off sorting:

# codegen.yml
schema: "schema.graphql"
config:
  sort: false
...

// codegen.ts
export default {
  schema: 'schema.graphql',
  config: {
    ...
    sort: false,
  },
  ...
};

Remember that disabling sorting will impact the arrangement of all generated schemas and type files, but in my experience, this adjustment doesn't lead to any negative repercussions.

Answer 3

Answer №2

This behavior from lexicographicSortSchema in the graphql utilities is something I personally find undesirable.

I believe that Enum values should not be sorted alphabetically, as it is important to preserve the original order.

For more information and a possible solution, you can visit this link: https://github.com/dotansimha/graphql-code-generator/issues/6935#issuecomment-1474084101. Additionally, there is a patch available for graphql which can be applied using patch-package.

Answer 4

This behavior from lexicographicSortSchema in the graphql utilities is something I personally find undesirable.

I believe that Enum values should not be sorted alphabetically, as it is important to preserve the original order.

For more information and a possible solution, you can visit this link: https://github.com/dotansimha/graphql-code-generator/issues/6935#issuecomment-1474084101. Additionally, there is a patch available for graphql which can be applied using patch-package.

Tips for maintaining enum order in graphql

Answer №1

Consider trying this approach

The answer you've been seeking

Answer №2

Similar questions

Typescript - Conditional Type and Optional Arguments

Challenges arise when attempting to share a theme across different repositories within a Storybook monorepo that utilizes

Ways to access configuration settings from a config.ts file during program execution

The Angular Ngrx store function, store.select('selector name'), should ideally provide a list of Books but instead, it is returning a non-iterable list

Can TypeScript's Zod library be utilized to parse a class instance?

What is the best return type to use for a TypeScript function that returns an AsyncFunction?

The Hapi response fails to display JSON data in a nested tree format

Creating a React component in Typescript to utilize lodash helper functions

Select a randomly generated number from an array, which dynamically updates every time the browser is refreshed

Following the execution of the commit, the variable remains in a state of

Locate an element within an array of strings to refine the contents of a flatlist

I am unable to import choices.js using the "import" command in TypeScript

"Dealing with Angular .map() function returning an empty array or displaying error messages

Dealing with the challenge of having multiple types in a single dynamic type within Typescript when using

Tips for saving a variable in Angular that is being received through a subscription as JSON:

Can fields from one type be combined with those of another type?

Transferring data from an Angular 2 component to a service

Why is Vite's hot reloading feature displaying unpredictable outcomes?

Ways to rename a sequelize property following a join operation

Angular 6 - execute function on either click event OR focus event