0

用户单击链接，客户端从 url 读取令牌。然后将令牌传递给signup突变。在后端，我将该令牌保存给用户，以便我可以查询并找到该用户。问题是我在客户端收到错误GraphQL error: No user found。我认为令牌没有传递给突变signup(shortLivedToken: String)，这就是我无法在后端查询用户的原因。在 graphql 操场上，一切都按预期工作。我知道我从 url 获取令牌，因为它在props.match.params.token这是我的前端SignUp组件中：

class SignUp extends Component {
  constructor(props) {
    super(props)
    this.state = { shortLivedToken: props.match.params.token }
  }

  handleMutation = async mutation => {
    try {
      const res = await mutation()
      console.log(res)
    } catch (e) {
      console.log(e)
    }
    // const token = res.data.signUp.token
    // localStorage.setItem(AUTH_TOKEN, token)
    // this.setState({ error: e.message })
    // }
  }

  render() {
    return (
      <Mutation
        mutation={SIGN_UP}
        variables={{ shortLivedToken: this.state.shortLivedToken }}
      >
        {(mutation, { data, loading, error }) => {
          if (loading)
            return (
              <Pane
                display="flex"
                alignItems="center"
                // justifyContent="center"
                height={400}
              >
                <Spinner />
              </Pane>
            )
          if (error)
            return (
              <Pane
                display="flex"
                alignItems="center"
                justifyContent="center"
                height={400}
              >
                <p>{this.props.match.params.token}</p>
                <Text>Error occurred {error.message}</Text>
              </Pane>
            )
          this.handleMutation(mutation)
          return null
        }}
      </Mutation>
    )
  }
}
4

1 回答 1

0

handleMutation不应该从渲染中调用，您可以使用react graphql-apollo 中的 HOC 并在 props 中获取突变，并在 react 生命周期方法中使用它来获取数据。

graphql(SIGN_UP, {
  name: 'signUp'
})(SignUp)

componentDidMount () {
  this.props.signUp({
    variables: {
      shortLivedToken: this.props.match.params.token
    }
  })
}

您的handleMutation功能应如下所述：

handleMutation = async mutation => {
try {
  const res = await mutation({variables: this.props.match.params.token})
  console.log(res)
} catch (e) {
  console.log(e)
}
// const token = res.data.signUp.token
// localStorage.setItem(AUTH_TOKEN, token)
// this.setState({ error: e.message })
// }

}

您也可以从中调用此函数componentDidMount。

希望这会有所帮助

于 2018-10-23T11:37:59.597 回答