Graphql-code-generator: Add `@types/graphql` as peer dependency in `typescript-operations` (and document it)

[deklanw]

Describe the bug
All of my mutation hook functions have return type Promise<any> in VSCode

E.g.

  const logout = useLogoutMutation();

...

  const result = await logout();

logout has type MutationFn<LogoutMutation, LogoutMutationVariables>
result has type any

But, then if I give logout a type manually

  const logout: MutationFn<
    LogoutMutation,
    LogoutMutationVariables
  > = useLogoutMutation();

This time with MutationFn coming from react-apollo everything works fine: result has a good type.

So, it seems that somewhere in react-apollo-hook's MutationFn something is going wrong?

To Reproduce

Versions:

    "@graphql-codegen/cli": "^1.2.0",
    "@graphql-codegen/typescript": "^1.2.0",
    "@graphql-codegen/typescript-operations": "^1.2.0",
    "@graphql-codegen/typescript-react-apollo": "^1.2.0",

...
    "typescript": "3.4.5",

config:

overwrite: true
schema: 'http://localhost:4000/graphql'
documents: 'src/graphql/**/*.{ts,tsx}'
generates:
  src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withMutationFn: true
      withComponent: false
      withHOC: false
      withHooks: true

[tzarger]

@deklanw same issue here. Works in some projects, not in others, specifically a React Native project. If you find a resolution, please post here.. I will do the same. Thanks.

[dotansimha]

Hi @tzarger @deklanw , I noticed it as well in some projects, and I think the solution for that is to make sure to add @types/graphql, because react-apollo imports ExecutionResult from it, and without that, the type is getting any.

Can you please try that?

[deklanw]

That seems to have worked. Thank you.

[dotansimha]

Great, @deklanw .
Keeping open because we need to document this on the website.

[tzarger]

@dotansimha Confirmed it is working here in React Native projects as well. Thanks!

[dotansimha]

Done. Thank you for reporting this :)