在setVariables之后，React relay pendingVariables始终为null

Question

When i try to set a variable, the component updates only after fetch is complete. Here is an exapmle code.

class RelayExample extends React.Component {
  setVars() {
    this.props.relay.setVariables({id: '2'});
  };
  render() {
    console.log(this.props.relay.pendingVariables);
    return (
      <div>
        <button onClick={this.setVars.bind(this)}>set variable</button>
      </div>
    );
  }
}

RelayExample = Relay.createContainer(RelayExample, {
  initialVariables: {
    id: '1'
  },
  fragments: {
    userStore: ()=> {
      return Relay.QL`
      fragment on userStore {
         user(id:$id){
          email
         }
      }
      `;
    }
  }
});

ReactDOM.render(
  <Relay.RootContainer Component={RelayExample} route={new TestQuery()}/>,
    document.getElementById('app')
);

When i press the button i get this result in console:

Even if i use forceUpdate right after the setVariables function, i get similar result.

setVars() {
        this.props.relay.setVariables({id: '2'});
        this.forceUpdate();
};

Answer 1

I believe this is intended behaviour.

pendingVariables contains the set of variables that are being used to fetch the new props, ie when this.props.relay.setVariables() or this.props.relay.forceFetch() are called and the corresponding request is in flight.

If no request is in flight pendingVariables is null.

If you console log right after you set your variables you should see them in pendingVariables .