在Relay.setVariables之后未定义变量

Question

I have a root container which has some relayVariables :

export default Relay.createContainer(UsageView, {
  initialVariables: {
    start: null,
    end: null,
  },
  fragments: {
    viewer: ({ start, end }) => Relay.QL`
      fragment on viewer {
        ${ProductList.getFragment('viewer', { start, end })}
      }
    `,
  },
});

These variables are passed down to the ProductList component and are used in it's fragment as well:

export default Relay.createContainer(Component, {
  initialVariables: {
    start: null,
    end: null,
  },
  fragments: {
    viewer: ({ start, end }) => Relay.QL`
      fragment on viewer {
        id
        organization {
          createdAt
          products (start: $start, end: $end) {
            name
            usageTotal
            ${ProductListItem.getFragment('data', { start, end })}
          }
        }
      }
    `,
  },
});

As you can see, these are then passed down to another component ProductListItem .

All data is fetched, loaded, and rendered just fine the first time the page is loaded . I have a dropdown which allows the user to change the start and end values, which proceeds to call relay.setVariables in the parent container:

setDateRange = ({ start, end }) => {
  this.props.relay.setVariables({
    start,
    end,
  }, (state) => {
    console.log('READYSTATE CHANGE', state);
  });
}

When this function is called, the onReadyStateChange is called 4 times, with this sequence of messages:

1. "NETWORK_QUERY_START"
2. "CACHE_RESTORE_START"
3. "CACHE_RESTORE_FAILED"
4. "NETWORK_QUERY_RECEIVED_ALL"

After this completes, the values of start and end are undefined , causing everything to break.

I can't seem to figure out why this is happening, as the values being set to start and end in setVariables are valid.

Answer 1

I realized I was not using the input of the setDateRange function correctly -- It was being passed a JSON string and needed to be parsed. Unfortunately, there was no way to tell from the relay request that this was the issue...