CODEWITHSUNDEEP
apolloreact-apollo
Zach_is_my_name
Zach_is_my_name

Reputation: 60

<query>.loading will not change to true

What are the possible reasons for query being stuck on loading = true (networkStatus = 1)?

I cannot get a query result on refetch and cannot log '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')
}

Upvotes: 1

Views: 268

Answers (1)

Locco0_0
Locco0_0

Reputation: 3500

This looks quite dangerous for a infinite loop.

First the refetch function is a Promise, so you will not be able to know the correct query state right after the call for refetching. You would need to go on in the .then function. See refetch Api.

Second the query in the end is executed inside the graphql wrapper Component. So you should not check the loading state and refetch in the componentWillReceiveProps function, Because when the query is executed again the whole component is instantiated again and will enter the componentWillReceiveProps function with resetted states and so on.

If you need some kind of search, i suggest you use a mutation as a workaround (using withApollo wrapper and in the componentWillReceiveProps you call this.props.client("MUTATION")), because this will not render the whole component.

Upvotes: 1

Related Questions