refetchQueries onComplete 回调

Posted 2023-03-10

【中文标题】refetchQueries onComplete 回调

【英文标题】：refetchQueries onComplete callback

【发布时间】：2018-11-15 23:17:06

【问题描述】：

是否可以添加一个回调函数，以便在 refetchQueries 完成时调用？问题是我不想让在后台发生突变后的重新获取，因为如果数据没有立即更新然后突然更新，它可能会使用户感到困惑。提交函数可能如下所示：

async submit(values) 
  this.setState( submitting: true )
  validateUrl(values.url).then((response:Response) => 
    response.json().then((data) => 
      if (data.length > 0) 
        this.onError("Invalid url")
        this.setState( submitting: false )
       else 
        this.props.mutate(
          variables: values,
          refetchQueries: [ query: LinksQuery]
        ).then(() => 
          this.props.navigation.pop(2)
          this.props.navigation.state.params.showSuccessFeedback()
          this.setState( submitting: false )
        );
      
    );
  )

但我不想在重新获取 LinksQuery 完成之前返回。

一种解决方案是使用 graphql() 装饰器将查询添加到组件，然后使用返回承诺的 refetch()。但是将它放在 refetchQueries 选项中会更干净。尤其是在需要重新获取多个查询时。

react-apollo 的版本是 1.4.15，但如果能解决问题我可能愿意升级到 react-apollo 2.*

【参考方案1】：

根据documentation，我们有awaitRefetchQueries：

作为 refetchQueries 的一部分重新获取的查询是异步处理的，并且在突变完成（解决）之前不会等待。将此设置为 true 将确保在认为突变完成之前完成重新获取的查询。默认为 false。

所以，你需要做的是在mutate函数的对象内设置awaitRefetchQueries等于True。

async submit(values) 
  this.setState( submitting: true )
  validateUrl(values.url).then((response:Response) => 
    response.json().then((data) => 
      if (data.length > 0) 
        this.onError("Invalid url")
        this.setState( submitting: false )
       else 
        this.props.mutate(
          variables: values,
          refetchQueries: [ query: LinksQuery],
          awaitRefetchQueries: true
        ).then(() => 
          this.props.navigation.pop(2)
          this.props.navigation.state.params.showSuccessFeedback()
          this.setState( submitting: false )
        );
      
    );
  )

我也遇到了同样的问题，这对我有用。希望对您有所帮助！

【讨论】：

帮助很大！谢谢:)

别担心，我也花了很长时间才弄明白：)