如何在打字稿+阿波罗中输入突变

Question

给我一个看起来像这样的突变。

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

我将如何使用graphql函数的类型react-apollo，然后将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