Question

我已经创建了一个由Apollo客户端和graphQL驱动的反应应用程序我的模式已定义，因此预期结果是一个对象数组（[{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方法中返回道具上的预期列表。

我想让用户操作客户端上的结果（编辑 / 删除列表中的指标，没有突变到实际数据上需要服务器）。但是由于结果是在组件道具上，我必须将它们移动到状态以便能够变异。如何在不造成无限循环的情况下将结果移动到状态？

Answer 1

如果阿波罗在这件事情上像接力一样工作，你可以尝试使用componentWillReceiveProps：

class ... extends Component {

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

像这样的东西。

Answer 2

componentWillReceiveProps将很快被弃用documentation

如果您使用的是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;
}

您可以通过阅读以下内容进一步了解：(reference link)，link1

Answer 3

您可以使用此：

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

const [metrics,setMetrics]=useState();

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

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

3 个答案: