CODEWITHSUNDEEP
relayjs
Tim
Tim

Reputation: 4661

Relay query that that depends on data from a Relay query

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 ?

Upvotes: 1

Views: 665

Answers (1)

glowka
glowka

Reputation: 730

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.

Upvotes: 1

Related Questions