Question

我在执行Apollo客户端查询时无法触发onCompleted回调。

查询运行没有问题，它返回了我期望的结果，但是 onCompleted 处理程序从不触发。我已经尝试了多种方法：

a）我尝试使用HOC代替React组件（请参阅在要点末发表评论）
b）我尝试使缓存无效并将fetchPolicy设置为“仅限网络”
我尝试将处理程序设置为“异步”

有一个与我所遇到的事情有关的Github开放问题，但是该线程中的人员仅在从缓存中加载时遇到该问题。我遇到了回调，但一直没有触发。 https://github.com/apollographql/react-apollo/issues/2177

这是我的代码的修剪示例：

import React from 'react';
import { graphql, Query } from 'react-apollo';
import { ProductQuery } from '../../graphql/Products.graphql';

class EditProductVisualsPage extends React.Component {
  constructor() {
    super();
  }

  render() {
    const { productId } = this.props;
    return (
      <Query
        query={ProductQuery} 
        variables={{ id: productId }}
        onCompleted={data => console.log("Hi World")}>
        {({ loading, data: { product } }) => (
          /* ... */ 
        )}
      </Query>
    );
  }
}

export default EditProductVisualsPage;

/*
export default graphql(ProductQuery, {
  options: props => ({
    variables: {
      id: props.productId,
    },
    fetchPolicy: "cache-and-network",
    onCompleted: function() {
      debugger;
    },
  }),
})(EditProductVisualsPage);
*/

在这一点上，我完全陷入了困境。任何帮助将不胜感激。

库版本

反应阿波罗（2.1.4）
阿波罗客户端（2.3.1）
反应（16.3.32）

Answer 1

（回答这个问题，因为它已经收到了很多意见）。

截至2019年4月，onCompleted处理程序仍然保持断开状态。但是，可以通过使用withApollo HOC来解决。 https://www.apollographql.com/docs/react/api/react-apollo#withApollo

这是一个示例集成：

import React from 'react';
import { withApollo } from 'react-apollo';

class Page extends React.Component {
  constructor(props) {
    super();
    this.state = {
      loading: true,
      data: {},
    };
    this.fetchData(props);
  }

  async fetchData(props) {
    const { client } = props;
    const result = await client.query({
      query: YOUR_QUERY_HERE, /* other options, e.g. variables: {} */     
    });

    this.setState({
      data: result.data,
      loading: false,
    });
  }

  render() {
    const { data, loading } = this.state;
    /* 
      ... manipulate data and loading from state in here ...
    */
  }
}
export default withApollo(Page);

onCompleted处理程序无法与Apollo客户端查询一起触发

1 个答案: