trojanowski/react-apollo-hooks

Issue with useMutation return type with generic typing

Croge32 opened this issue · 1 comments

So first of all I love this library so far! One issue I noticed recently is I'm having trouble getting the typings for the useMutation hook to work as expected in my project.

I'm using the hook like so:

const login = useMutation<Payload<LoginData>, LoginVariables>(LOGIN, {
    variables: {
      password: newPassword,
      phoneNumber: stripPhoneFormat(phoneNumber),
    },
  })

Here are the types I've defined:

  interface LoginData {
    login: TokenSet
  }

  interface LoginVariables {
    password: string
    phoneNumber: string
  }

  interface SuccessPayload<T> {
    successful: true
    result: T
    messages: null
  }
  interface FailurePayload {
    successful: false
    result: null
    messages: ValidationMessage[]
  }

  export type Payload<T> = SuccessPayload<T> | FailurePayload

According to this comment, I think this is the correct usage: #164 (comment)

Whenever looking at the return type for this function when used, I see that it resolves to a type of Promise<any> as seen here:

Screen Shot 2019-06-13 at 11 02 49 AM

I've also tried using the login function in an async/await context and with variables passed both from the useMutation context and at function runtime with the same results.

I'm on version 0.4.5

So I just figured out that it was because I needed to run npm install --save-dev @types/graphql to my project! Now my types resolve as expected. 👍