React-Apollo客户端，如何将查询结果添加到状态

Question

我创建了一个由Apollo客户端和graphQL驱动的react应用程序
定义了我的架构，因此预期结果是一个对象数组（<代码>[{名称：“metric 1”，类型：“type A”}，{名称：“metric 2”，类型：“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客户端工作正常，并在渲染方法中返回道具的预期列表。

我想让用户在客户机上操纵结果（编辑/删除列表中的指标，不需要改变服务器上的实际数据）。然而，由于结果在组件道具上，我必须将它们移动到状态，以便能够变异。如何将结果移动到状态而不引起无限循环？

Answer 1

您可以使用这个：

import {useState} from 'react';
import {useQuery} from '@apollo/client';

const [metrics,setMetrics]=useState();

useQuery(metricsQuery,{
    variables:{id: ownProps.id},
    onCompleted({metrics}){
        setMetrics(metrics);
    }
});

Answer 2

组件WillReceiveProps将很快被弃用（参考链接）

如果您使用的是React 16，则可以执行以下操作：

class DemoClass extends Component {
  state = {
    demoState: null // This is the state value which is dependent on props
  }

  render() {
    ...
  }
}

DemoClass.propTypes = {
  demoProp: PropTypes.any.isRequired,  // This prop will be set as state of the component (demoState)
}

DemoClass.getDerivedStateFromProps = (props, state) => {
  if (state.demoState === null && props.demoProp) {
    return {
      demoState: props.demoProp,
    }
  }
  return null;
}

您可以通过阅读以下内容了解更多信息：link 1， link 2

Answer 3

如果apollo在这件事上像中继一样工作，您可以尝试使用组件WillReceiveProps：

class ... extends Component {

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

像这样的。