onCompleted 处理程序未使用 Apollo 客户端查询触发

Question

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

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

a) 我试过使用 HOC 而不是 React 组件（参见要点末尾的评论）
b) 我试过使缓存无效并将 fetchPolicy 设置为 'network-only'
我试过将处理程序设置为 "async"

有一个 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);

Answer 2

另一个解决方案，这对我有用。 onCompleted坏了，不过你需要的是在X完成后调用一个函数。只需使用旧的 .then()，这里是任何前端新手的示例。

    fireFunction().then(() => {
       console.log('fired')
    });

onCompleted 处理程序未使用 Apollo 客户端查询触发

onCompleted handler not firing with Apollo Client Query

apollo

reactjs

react-apollo

apollo-client