refetchQueries onComplete 回调

Question

是否可以添加一个在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()，returns 一个承诺。但是将它放在 refetchQueries 选项中会更干净。特别是如果应该重新获取多个查询。

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

Answer 1

根据 documentation，我们有 awaitRefetchQueries:

Queries refetched as part of refetchQueries are handled asynchronously, and are not waited on before the mutation is completed (resolved). Setting this to true will make sure refetched queries are completed before the mutation is considered done. false by default.

因此，您需要做的是在 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 })
        });
      }
    });
  })
}

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

refetchQueries onComplete 回调

refetchQueries onComplete callback

react-native

react-apollo