How to type a mutation in typescript + apollo

Question

given I have a mutation that looks like this.

mutation SignInMutation($email: String!, $password: String!) {
  signIn(input: {email: $email, password: $password}) {
    token {
      accessToken
      accessTokenExpiresOn
    }
  }
}

how would I use the type the graphql function in react-apollo to then add a signIn method to a class?

e.g.

import SignInMutation from '~/mutations/SignInMutation.gql`
import { graphql } from 'react-apollo'

@graphql(SignInMutation, {
  props: ({ mutate }) => ({
    signIn: (variables) => mutate({variables})
  })
})
class SignInPage extends React.Component {
  state = {
    email: '',
    password: '',
  }
  render() {
   <form>
     ...
     <button onClick={() => this.props.signIn(this.state)}>
     </button>
   </form>
  }
}

Answer 1

There is a small library and a CLI to generate react-apollo components using your queries and mutations inside GraphQL files in your project. So, you can use them easily by importing generated file like;

import { YourQuery } from './generated';

<YourQuery.Component>
...
</YourQuery.Component>

You can try it here: https://github.com/dotansimha/graphql-code-generator

And there is a blog post here; https://medium.com/the-guild/graphql-code-generator-for-typescript-react-apollo-7b225672588f