OneGraph和Graphql Codegen输出带有数值的枚举 [英] OneGraph and Graphql Codegen outputs enums with numeric values

问题描述

因此，我只是将项目的整个代码库从使用直接的Headless Wordpress GraphQL端点迁移到使用对Google + Facebook Business支持的OneGraph.OneGraph是一个了不起的工具，打算在我实际上是在无头WordPress上编写的技术课程中使用它.无论如何，我遇到了这个阿波罗错误，它正在引用输出代码生成器.这是错误:

So I just migrated my entire codebase for a project from using the direct Headless Wordpress GraphQL endpoint to using OneGraph for Google+Facebook Business support. OneGraph is an amazing tool, intend to use it in a tech ed course I'm writing on headless WordPress actually. Anyway, I am getting this apollo error, it is referencing the output codegen. Here's the error:

  graphQLErrors: [
    {
      message: 'Variable "$idTypeFoot" got invalid value 2; Expected type MenuNodeIdTypeEnum.',
      path: [Array],
      extensions: [Object]
    },
    {
      message: 'Variable "$idTypeFoot" got invalid value 2; Expected type MenuNodeIdTypeEnum.',
      path: [Array],
      extensions: [Object]
    }
  ],

这是我生成的/graphql.tsx文件中的输出代码生成定义:

Here's the output codegen definition in my generated/graphql.tsx file:

export enum WordpressMenuNodeIdTypeEnum {
    /** Identify a menu node by the Database ID. */
    DATABASE_ID = 0,
    /** Identify a menu node by the (hashed) Global ID. */
    ID = 1,
    /** Identify a menu node by it's name */
    NAME = 2
}

在将我的代码库迁移到一图之前，这是该枚举的先前定义:

Here is the previous definition of that same enum prior to migrating my codebase to onegraph:

/** The Type of Identifier used to fetch a single node. Default is "ID". To be used along with the "id" field. */
export enum MenuNodeIdTypeEnum {
    /** Identify a menu node by the Database ID. */
    DatabaseId = 'DATABASE_ID',
    /** Identify a menu node by the (hashed) Global ID. */
    Id = 'ID',
    /** Identify a menu node by it's name */
    Name = 'NAME'
}

以下是父查询中使用的 dynamic-nav-fields.graphql 部分:

Here is the dynamic-nav-fields.graphql partial used in the parent query:

fragment DynamicNavFragment on WordpressMenuItem {
    id
    label
    path
    parentId
}

这是 dynamic-nav.graphql 父查询:

# import DynamicNavFragment from './Partials/dynamic-nav-fields.graphql'

query DynamicNav(
  $idHead: ID!
  $idTypeHead: WordpressMenuNodeIdTypeEnum!
  $idFoot: ID!
  $idTypeFoot: WordpressMenuNodeIdTypeEnum!
    ) {
    Header: wordpress {
        menu(id: $idHead, idType: $idTypeHead) {
            menuItems(where: { parentId: 0 }) {
                edges {
                    node {
                        ...DynamicNavFragment
                        childItems {
                            edges {
                                node {
                                    ...DynamicNavFragment
                                    childItems {
                                        edges {
                                            node {
                                                ...DynamicNavFragment
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    Footer: wordpress {
        menu(id: $idFoot, idType: idTypeFoot) {
            menuItems(where: { parentId: 0 }) {
                edges {
                    node {
                        ...DynamicNavFragment
                        childItems {
                            edges {
                                node {
                                    ...DynamicNavFragment
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

这是我的codegen.yml配置文件:

Here is my codegen.yml configuration file:

overwrite: true
schema:
  ${WORDPRESS_API_URL_YML}:
    headers:
      Authorization: Bearer ${WORDPRESS_AUTH_REFRESH_TOKEN_YML}
documents: 'graphql/**/*.graphql'
generates:
  graphql/generated/graphql.tsx:
    plugins:
      - typescript:
          constEnums: false
          enumsAsTypes: false          
          numericEnums: true
          futureProofEnums: false
          enumsAsConst: false
          onlyOperationTypes: false
          maybeValue: T | null | undefined
          noExport: false
          enumPrefix: true
          fieldWrapperValue: T
          wrapFieldDefinitions: true
          skipTypename: false
          nonOptionalTypename: false
          useTypeImports: false
          avoidOptionals: true
          declarationKind: 
            input: interface
            type: interface
      - typescript-operations:
          declarationKind:
            input: interface
            type: interface
          avoidOptionals: true
          exportFragmentSpreadSubTypes: true
      - typescript-react-apollo:
          addDocBlocks: true
          reactApolloVersion: 3
          documentMode: documentNodeImportFragments
    config:
      maybeValue: T | null | undefined
      declarationKind:
        input: interface
        type: interface
      documentNodeImportFragments: true
      reactApolloVersion: 3
      withHooks: true
      withHOC: false
      avoidOptionals: true
      withComponent: false
      exportFragmentSpreadSubTypes: true
      addDocBlocks: true
  graphql/graphql.schema.graphql:
    plugins:
      - schema-ast
    config:
      commentDescriptions: true
  graphql/graphql.schema.json:
    plugins:
      - introspection
    config:
      commentDescriptions: true
      
hooks:
  afterAllFileWrite: 
    - prettier --write

为什么OneGraph用生成的Enum值替换为apollo客户端无法读取的数字?如果有人知道如何解决此问题，请告诉我

Why is OneGraph replacing the generated Enum values with numbers that apollo client can't read? If anyone knows how to resolve this please let me know

推荐答案

tldr;更改 codegen.yml 以使用 numericEnums:false :

tldr; change codegen.yml to use numericEnums: false:

generates:
  graphql/generated/graphql.tsx:
    plugins:
      - typescript:
          numericEnums: false

要对此进行跟踪，我采用了 WordpressMenuNodeIdIdTypeEnum 的GraphQL SDL定义:

To track this down, I took the GraphQL SDL definition of WordpressMenuNodeIdTypeEnum:

enum WordpressMenuNodeIdTypeEnum {
    # Identify a menu node by the Database ID.
    DATABASE_ID
    # Identify a menu node by the (hashed) Global ID.
    ID
    # Identify a menu node by it's name
    NAME
}

以及 codegen.yml 中的先前 numericEnums:true 设置，并在操场上的

along with the previous numericEnums: true setting in codegen.yml, and used them on the playground at https://www.graphql-code-generator.com

如屏幕截图所示，SDL定义被编译为数字枚举(运行时打字稿枚举的标准)

As you can see in the screenshot, the SDL definition was compiled into numeric enums (the standard for typescript enums at runtime)

然后我用 numericEnums:false 进行了测试:

I then tested with numericEnums: false:

该输出看起来像您期望的那样，其中 WordpressMenuNodeIdTypeEnum.Name 等于"NAME" ，以便Apollo获得期望值而不是运行时typescript枚举值( 2 ).

And that output looks like what you'd expect, where WordpressMenuNodeIdTypeEnum.Name is equal to "NAME", so that Apollo gets the expected value instead of the runtime typescript-enum value (2).

这篇关于OneGraph和Graphql Codegen输出带有数值的枚举的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！