我创建了一个由 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 上,我必须将它们移动到状态以便能够变异。如何在不导致无限循环的情况下将结果移动到状态?
最佳答案
如果 apollo 在这件事上像中继一样工作,你可以尝试使用 componentWillReceiveProps
:
class ... extends Component {
componentWillReceiveProps({ metrics }) {
if(metrics) {
this.setState({
metrics,
})
}
}
}
像这样。
关于javascript - React - Apollo Client,如何将查询结果添加到状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48788677/