如何确保在组件安装之前我有数据？

Question

用户单击 link，客户端从 url 读取令牌。然后将令牌传递给 signup 突变。在后端，我将该令牌保存给用户，以便我可以查询并找到该用户。问题是我在客户端 GraphQL error: No user found 收到错误。我假设令牌没有传递给 mutation signup(shortLivedToken: String) 这就是我无法在后端查询用户的原因。在 graphql playground 中，一切都按预期工作。我知道我从 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>
    )
  }
}

Answer 1

handleMutation 不应从渲染中调用，您可以使用来自 react-apollo 的 graphql 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 调用此函数。

希望这会有所帮助

如何确保在组件安装之前我有数据？

How can I make sure I have data before component mounts?

reactjs

graphql

react-apollo

prisma