<query>.loading不会变true

Question

查询卡在 loading = true (networkStatus = 1) 的可能原因是什么？

我无法在重新获取时获得查询结果，也无法记录 'called2'

graphql(_stepQuery, {
    name: 'stepQuery',
    options: ({goalDocId}) => ({
      fetchPolicy: 'network-only',
      notifyOnNetworkStatusChange: true,
      variables: {
        goalDocId
      }
    })
  }
)

componentWillReceiveProps(nextProps) {
    let stepIdsFromServer
    if (nextProps.currentGoalSteps.length > this.props.currentGoalSteps.length)   {
      console.log('called')
      this.props.stepQuery.refetch()
      console.log('this.props', this.props)
      console.log('nextProps',nextProps)
      if (!nextProps.stepQuery.loading) {
      // console.log('nextProps.stepQuery.allSteps', nextProps.stepQuery.allSteps)
          console.log('called2')
}

Answer 1

对于无限循环来说，这看起来很危险。

首先，refetch 函数是一个 Promise，因此您无法在重新获取调用后立即知道正确的查询状态。您需要在 .then 函数中继续。参见 refetch Api。

其次，最后的查询在 graphql 包装器组件内部执行。所以你不应该在 componentWillReceiveProps 函数中检查加载状态和重新获取，因为当再次执行查询时，整个组件将再次实例化，并将进入具有重置状态的 componentWillReceiveProps 函数等等。

如果您需要某种搜索，我建议您使用突变作为解决方法（使用 withApollo 包装器并在 componentWillReceiveProps 中调用 this.props.client("MUTATION")), 因为这不会渲染整个组件。

<query>.loading不会变true

<query>.loading will not change to true

apollo

react-apollo