Not render when Apollo query is 'loading' - React

Question

I have a react-redux app that uses Apollo client to make queries to my api GraphQL.

I have a GridContainer that makes the query call using export default connect(mapStateToProps, mapDispatchToProps)(GridContainerWithData); where GridContainerWithData is a const that makes the query with graphql(gql`...)

This returns data in my props containing: the query response, if there is an error and the loading state (true or false).

Right now, I'm managing the loading myself using if(loading) {}.

The problem in this is my component renders when it's in loading state and then again when the query is done loading. If I don't use the if(loading) {}, I get an error saying I need to return something when the query is in loading state.

Is there any way to tell the component to not render when the query is loading?

I tried using

shouldComponentUpdate (nextProps) {
    if (this.props.data.loading !== nextProps.data.loading) {
      console.log(‘i will rerender’, nextProps.data.loading);
      return true;
    }else {
      return false;
    }
}

but no luck there.

Is there any way to tell the component to not render when the query is loading?

EDIT:

This is my GridContainer if it can help anyone.

class ActionsToDoGridContainer extends Component {

 render () {
   const {error} = this.props.data;

   if (error) {
     return (
       <div className='ComponentDistance'>
         An unexpected error happened :
         {error}
       </div>);
    } else {
     return (
        <div className='ComponentDistance'>
          <ActionsToDoGrid {...this.props}/>
         ActionsToDoButtons {...this.props}/>
        </div>
     );
    }
  }
}

Stephen L · Accepted Answer · 2017-06-13 19:04:11Z

2

edit: The poster of the question resolved his own issue with this code:

shouldComponentUpdate(nextProps) { 
  if (nextProps.data.loading === false) { 
    return true;
  } else {
    return false;
  }
}

I think you were thinking in the right direction with shouldComponentUpdate, but instead of checking to see if the loading state is different, check to see if your data is different.

shouldComponentUpdate (nextProps) {
    const thisData = this.props.data.queryDataResponse;
    const nextData = nextProps.data.queryDataResponse;
    if (!someLibrary.deepEquals(thisData, nextData)) {
      return true;
    }else {
      return false;
    }
}

If the data changes, your function will return true and update. You may run in to some edge cases so don't forget about this function when things seem to break

edited Jun 13, 2017 at 19:04

answered Jun 13, 2017 at 16:11

Stephen L

2,35913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

petithomme Over a year ago

Unfortunately, when I return null, my grid disappears for the loading time until I receive the new data. I would like to keep my grid with my previous data until the query has finished loading.

Stephen L Over a year ago

i updated my answer. I think you can use shouldcomponentupdate for this

petithomme Over a year ago

Ok now it renders 2 times at start of the application (I think that's normal). The first action I do (changing page) only renders once (when it is finished loading). But at the second time I change page (or third or fourth or...), it renders 2 times (loading and not loading). Any idea why?

Stephen L Over a year ago

that makes sense... your reducer is returning a new state object each time the loading flag changes. You need to do a deepEqual comparison by value. you can use lodash or some similar library that has deepEqual or write it yourself. Editing my comment

petithomme Over a year ago

Actually, I found a way to make it work with shouldComponentUpdate(). I implemented this in my Container juste before the render() function: shouldComponentUpdate (nextProps) { if (nextProps.data.loading === false) { return true; }else { return false; } }

|

Collectives™ on Stack Overflow

Not render when Apollo query is 'loading' - React

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related