CODEWITHSUNDEEP
reactjsrelayjsgraphql
Chris
Chris

Reputation: 59511

Relay - set variable before query

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.

Upvotes: 7

Views: 1662

Answers (1)

steveluscher
steveluscher

Reputation: 4228

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'})}
/>

Upvotes: 2

Related Questions