Graphql-code-generator: import-types-preset with react-apollo

[xiaoyu-tamu]

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

# Put your schema here

1. My GraphQL operations:

fragment user on users {
  id
  username
  password
  is_active
  first_name
  last_name
  level
  type
  roles {
    is_default
    role {
      id
      name
    }
  }
}

query selectUsersByUsername($username: String!) {
  users(limit: 1, where: { username: { _eq: $username } }) {
    ...user
  }
}

1. My codegen.yml config file:

overwrite: true
strict: true
config:
  skipTypename: true
  namingConvention:
    typeNames: change-case#pascalCase
    transformUnderscore: true
  scalars:
    uuid: string
    timestamptz: string
schema:
  - some-remote-schema
generates:
  src/generated/types.ts:
    - typescript
  src/generated/api.ts:
    documents: documents/api/*.graphql
    preset: import-types
    presetConfig:
      typesPath: "@/generated/types.ts"
    plugins:
      - typescript-operations
      - typescript-graphql-request
  src/generated/www.tsx:
    documents: documents/www/*.graphql
    preset: import-types
    presetConfig:
      typesPath: "@/generated/types.ts"
    config:
      withHooks: true
      withHOC: false
      withComponent: false
    plugins:
      - typescript-operations
      - typescript-react-apollo

Expected behavior

Generated react-hook helpers should not prefix with Types.
Environment:

• OS:
• @graphql-codegen/...:
• NodeJS:

Additional context

    "@graphql-codegen/cli": "1.8.1",
    "@graphql-codegen/typescript": "1.8.1",
    "@graphql-codegen/typescript-graphql-request": "1.8.1",
    "@graphql-codegen/typescript-operations": "1.8.1",
    "@graphql-codegen/typescript-react-apollo": "1.8.1",

[myylow]

I have the same, and a workaround is to split typescript-react-apollo away from typescript-operations. A structure something like this...

   src/generated/graphql-types.ts:
      - typescript

   src/generated/operation-types.tsx:
      preset: import-types
      presetConfig:
         typesPath: './graphql-types'
      plugins:
         - typescript-operations

   src/generated/apollo-types.tsx:
      preset: import-types
      presetConfig:
         typesPath: './operation-types'
      plugins:
         - typescript-react-apollo

@dotansimha Thanks for all your work on this library, it is incredibly useful!

[xiaoyu-tamu]

The issue still exist after 1.8.2 and the dot between Types and Query name disappeared

[xiaoyu-tamu]

https://github.com/dotansimha/graphql-code-generator/blob/4529aae3277b5cc7c0f7c4d19f4b4769c0710381/packages/plugins/typescript/react-apollo/src/visitor.ts#L288-L296

The name before convert are correct. Looks like something wrong with convertName method, maybe caused by PR: Fixes for transformUnderscore (#2743)?

[dotansimha]

I think I managed to reproduce and fix this in: https://github.com/dotansimha/graphql-code-generator/pull/2862

@xiaoyu-tamu Can you please try this alpha? 1.8.3-alpha-57c54418.34

[xiaoyu-tamu]

@dotansimha it works. Thank you

[dotansimha]

Fixed in 1.8.3

[calumpeak]

@dotansimha I've upgraded to the most recent version and I'm still seeing this issue, have I made a mistake with my config by any chance?

schema: http://localhost:3000/graphql
documents: ./src/**/*.{ts,tsx}
overwrite: true
hooks:
  afterAllFileWrite:
    - prettier --write
generates:
  ./src/@types/api/index.d.ts:
    plugins:
      - add: '/* eslint-disable */'
      - typescript
  ./src/hooks/apollo.ts:
    preset: import-types
    presetConfig:
      typesPath: ../@types/api/index.d
    plugins:
      - typescript-operations
      - typescript-react-apollo
    config:
      reactApolloVersion: 3
      withHooks: true
      withHOC: false
      withComponent: false

[ardatan]

@calumpeak Could you create a reproduction using codesandbox by any chance?

[calumpeak]

@ardatan Sure thing, here you go: https://codesandbox.io/s/unruffled-goldwasser-hurx5

If you run yarn generateTypes from the terminal you should be good (though I've generated them already)

Generated Apollo hooks are under src/hooks/apollo

[Urigo]

@calumpeak does that issue still happens on latest?

If so, could you open a new issue please?

[calumpeak]

@Urigo I will upgrade and test and get back to you. Thanks

[dmitrif]

Still happening (Types.* issue) on @graphql-codegen/cli@^1.20.0

[dotansimha]

@dmitrif can you please share a reproduction? Are you using latest versions of cli and all plugins?