javascript - React - Apollo Client，如何将查询结果添加到状态

Question

我创建了一个由 Apollo 客户端和 graphQL 驱动的 React 应用程序。
我的架构已定义，因此预期结果是一个对象数组 ([{name:"metric 1", type:"type A"},{name:"metric 2", type:"type B"}] )

在我的 jsx 文件中，我定义了以下查询:

query metrics($id: String!) {
  metrics(id: $id) {
    type
    name
  }
}`;

我像这样用 Apollo HOC 包装了组件:

export default graphql(metricsQuery, {
  options: (ownProps) => {
    return {
      variables: {id: ownProps.id}
    }
  }
})(MetricsComp);

Apollo 客户端工作正常，并在 render 方法中返回预期的 props 列表。

---

我想让用户在客户端上操作结果(编辑/删除列表中的一个指标，对实际数据没有突变需要服务器)。然而，由于结果在组件 Prop 上，我必须将它们移动到状态以便能够变异。如何在不导致无限循环的情况下将结果移动到状态？

Answer 1

如果 apollo 在这件事上像中继一样工作，你可以尝试使用 componentWillReceiveProps:

class ... extends Component {

  componentWillReceiveProps({ metrics }) {
    if(metrics) {
      this.setState({
        metrics,
      })
    }  
  }
}

像这样。