Relay - set variable before query

Question

I'm currently working on a page that displays the status of a certain set of "tasks" for a specific user. To fetch the data, I have the following Relay container:

export default Relay.createContainer(TaskReview, {
  initialVariables: {
    limit: Number.MAX_SAFE_INTEGER,
    studentId: null,
  },
  fragments: {
    task: () => Relay.QL`
      fragment on Task {
        id,
        title,
        instruction,
        end_date,
        taskDataList(first: $limit, type: "subTasks", member: $studentId) {
          edges {
            node {
              id,
              answer,
              completion_date,
            }
          }
        },
        ...

To define which user I want to get data from, I use:

componentWillMount = () => {
  let {relay} = this.props;
  relay.setVariables({
    studentId: this.props.member.id
  });
}

However, the problem here is that the query is first executed with null as defined in initialVariables. My backend implementation has it so that if the studentId is NULL, then it returns the data for all members.

The result is that the above query executes twice, the first time with all members, and the second time with the given memberId.

This messes up with other things within my componentWillUpdate. Is there anyway I can pass this variable and only get the data for that member on the first query?

Thanks.

Answer 1

Prime your app with these initial conditions by passing your variable down through the route.

class TaskReviewRoute extends Relay.Route {
  static paramDefinitions = {
    studentId: {required: true},
  };
  static queries = {
    task: () => Relay.QL`query { ... }`,
  };
  static routeName = 'TaskReviewRoute';
}

<Relay.RootContainer
  Container={TaskReview}
  route={new TaskReviewRoute({studentId: '123'})}
/>