使用 react-apollo 将变量传递给 graphql 查询

Question

我在将变量选项传递到 graphql 查询时遇到问题。如果 console.log(ownProps.match.params.id) 我得到正确的 ID。

但是我收到这个错误：

Error: The operation 'selectCustomer' wrapping 'Apollo(Apollo(withRouter(Consumer)))' is expecting a variable: 'id' but it was not found in the props passed to 'Apollo(Apollo(Apollo(withRouter(Consumer))))'

导出

const ConsumerWithMutations =  graphql(selectCustomer, {
  name : 'selectCustomer',
  options: (ownProps) => ({
    variables: {
      id: ownProps.match.params.id
    }
  })
})(graphql(deleteCustomer, {
  name: 'deleteCustomer'
})(withRouter(Consumer)))

export default graphql(selectCustomer)(ConsumerWithMutations);

查询

const selectCustomer = gql`
query selectCustomer($id: String!)
{
  consumer(id: $id) {
    id
    firstname
    lastname
    dateOfBirth
    ...

Answer 1

您试图用相同的查询 HOC 包装您的组件两次 - 第一次在您的 ConsumerWithMutations 定义中，然后再次在您的导出语句中。

您没有将任何选项传递到导出语句中的 HOC，因此您的 selectCustomer 查询无法找到您指定的 id 变量，这就是您看到错误的原因得到了。

将导出语句修改为：

export default ConsumerWithMutations;

它应该可以工作。

我还强烈建议您在像这样使用多个 HOC 时使用 compose——它有助于保持代码的可读性。查看示例 here.

使用 react-apollo 将变量传递给 graphql 查询

Passing variables to graphql query with react-apollo

graphql

react-apollo

apollo-client