refetchQueries onComplete callback

Question

Is it possible to add a callback function to be called when refetchQueries is completed? The problem is that i do not want to let the refetching after a mutation happen in the background as it may confuse users if data does not update immediately and then suddenly updates out of the blue. A submit function could look like this:

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 })
        });
      }
    });
  })
}

But i don't want to navigate back before the refetch of the LinksQuery is completed.

One solution is to add the Query to the Component using the graphql()-decorator, and then use refetch() which returns a promise. But it would be much cleaner to have it in the refetchQueries option. Especially if several queries should be refetched.

The version of react-apollo is 1.4.15, but i might be willing to upgrade to react-apollo 2.* if it could solve the problem

Answer 1

根据documentation，我们有awaitRefetchQueries：

  

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

因此，您需要做的是在awaitRefetchQueries函数的对象内部将True设置为等于mutate。

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 })
        });
      }
    });
  })
}

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