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

Posted 2023-02-21

【中文标题】onCompleted 处理程序未使用 Apollo 客户端查询触发

【英文标题】：onCompleted handler not firing with Apollo Client Query

【发布时间】：2019-01-27 23:25:52

【问题描述】：

我在执行 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);
*/

在这一点上，我完全被难住了。任何帮助将不胜感激。

库版本

react-apollo (2.1.4) apollo 客户端 (2.3.1) 反应（16.3.32）

【问题讨论】：

你找到解决方案了吗？

没有真正的解决方案，只有我在这里列出的解决方法：github.com/apollographql/react-apollo/issues/…

【参考方案1】：

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

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

【参考方案2】：

（由于这个问题已经收到了大量的意见，所以回答这个问题）。

截至 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);