Question

鉴于我有一个看起来像这样的突变。

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

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

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

有一个小型库和一个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

如何在typescript + apollo中输入变异

1 个答案: