dotansimha/graphql-code-generator-community

[typescript-react-apollo] `dedupeOperationSuffix` doesn't work when operation name is all upper case

オープン

#126 opened on 2021/05/05

 (1 件のコメント) (0 件のリアクション) (0 人の担当者)TypeScript (195 件のフォーク)github user discovery
help wanted

Repository metrics

Stars
 (136 個のスター)
PR merge metrics
 (平均マージ 1d 11h) (30d で 28 merged PRs)

説明

Describe the bug

The typescript-react-apollo plugin doesn't properly handle deduping operation suffix when the suffix is all upper case.

To Reproduce

Generate apollo typescript hooks with an operation name that is all caps and post-fixed with QUERY, MUTATION, or FRAGMENT.

  1. My GraphQL schema:
type Query {
    user(id: ID!): User!
}

type User {
    id: ID!
    username: String!
    email: String!
}
  1. My GraphQL operations:
query GET_USER_QUERY {
    user(id: 1) {
        id
        username
        email
    }
}
  1. My codegen.yml config file:
config:
  apolloClientVersion: 3
  dedupeOperationSuffix: true
  namingConvention:
    transformUnderscore: true
documents:
  - './src/**/*.graphql'
generates:
  src/graphql/types-and-hooks.ts:
    schema: schema.graphql
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'

Expected behavior

A hook should be generated with pascal case without duplicate operation name suffix

export function useGetUserQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<GetUserQuery, GetUserQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
        return ApolloReactHooks.useQuery<GetUserQuery, GetUserQueryVariables>(GetUserQueryDocument, options);
      }

Environment:

  • OS: MacOS 11.3
  • "@graphql-codegen/cli": "^1.21.3",
  • "@graphql-codegen/typescript": "^1.21.1",
  • "@graphql-codegen/typescript-operations": "^1.17.15",
  • "@graphql-codegen/typescript-react-apollo": "^2.2.4",
  • NodeJS: 12

Additional context

From looking at the codebase, I believe that the operation name being tested here should either be a regex match or convert it to test the operation name via pascalCase(name).includes(...).

コントリビューターガイド