typescript - 如何在 typescript + apollo 中输入突变

Question

假设我有一个看起来像这样的突变。

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

我如何使用 react-apollo 中的 graphql 函数类型，然后将 signIn 方法添加到类中？

例如

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

有一个小型库和一个 CLI，可以使用您项目中 GraphQL 文件中的查询和变更来生成 react-apollo 组件。因此，您可以通过导入生成的文件轻松地使用它们；

import { YourQuery } from './generated';

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

您可以在这里尝试:https://github.com/dotansimha/graphql-code-generator

这里有一篇博文； https://medium.com/the-guild/graphql-code-generator-for-typescript-react-apollo-7b225672588f