Relay query that that depends on data from a Relay query

Question

I'm trying to perform a Relay query that that depends on data from another relay query

Assuming this runs under a url like /job/{jobID}

React

render() {

  const job = this.props.job

  return(
      <h1>{job.name}</h1>

      <TasksOutstanding 
        project={job.project} 
        from={job.startDate} 
        to={job.finishDate} />
  ) 
}

Relay

  fragments: {
    job: () => Relay.QL`
      fragment on Job {
        name
        startDate
        finishDate
        project {
          ${TasksOutstanding.getFragment('project')}
        }
     }
    `,

So I need to get startDate and finishDate into the fragment, something like ${TasksOutstanding.getFragment('project',{from, to})}

But these values (from to) are unknown on the initial fetch ( all I have then is the jobID)

How are people dealing with this? Should I just execute a second request on component did mount once I have the startDate and finishDate values ?

glowka glowka · Accepted Answer · 2017-02-09T17:59:41

You need to create field with arguments, this is GraqhQL feature and you should be able to do it with your tool for modeling the schema.

Relay's variables also will be useful. They will solve the problem that you don't know them on initial fetch.

So declare project field with from and to arguments, query the field using arguments are return appropriate data for project field. Your container should look like this:

initialVariables: {
   from: null,
   to: null
},

fragments: {
   job: () => Relay.QL`
     fragment on Job {
       name
       startDate
       finishDate
       project(from: $from, to: $to) {
         ${TasksOutstanding.getFragment('project')}
       }
     }
   `,
}

Then during the application life, you can set your variables using setVariables to job.startDate and job.finishDate and have proper project fetched.

Relay query that that depends on data from a Relay query

1 Answers