Relayjs fatquery not generating expected query

Question

I have a pseudo structure that looks/works a bit like this:

Organization <- OrganizationType
{
   TopLevelEmployees <- EmployeeType
   {
     id,
     Name,
     Pay,
     Subordinates <- EmployeeType
     {
        id,
        Name,
        Pay,
        Subordinates.if(variables.expanded)
     }
   },
   Departments <- DepartmentType
   {
      Name,
      Organization, <- OrganizationType
      Employees
   }
}

I have a control that displays the Employee tree structure

<EmployeeTreeEditor Organization={organization} />

I then have a control that edits departments individually

<DepartmentEditor Department={department} />

The DepartmentEditor's Relay query looks like this:

    fragments: {
    Department: () => Relay.QL`

      fragment on Department
      {
        Employees 
        {
           id,
           Name,
           Pay
        },
        Organization
        {
           id,
        }
      }

`}

In the DepartmentEditor there is a button that raises the pay for all employees in that department by 10% with the RaiseDepartmentPayMutation.

The fatQuery for the RaiseDepartmentPayMutation looks like this:

    fragments: {
    Department: () => Relay.QL`

      fragment on Department
      {
         Organization
      }

   `}

The RaiseDepartmentPayMutation returns an OrganizationPayload.

When the Raise Pay button is pressed in DepartmentEditor I'd like to completely reload the Organization's TopLevelEmployees because their Pay could have changed.

The problem is that the query thats generated is based on the Department::Organization query and only fetches the Organization id.

I guess that if I'd passed Organization to DepartmentEditor instead of Department then it might fetch the TopLevelEmployees, but I can't keep passing my Organization along to child controls.

The other solution I see might be to have a seperate fragment that I include in both the EmployeeTreeEditor and Mutation fatQuery

${Something.getFragment('Organization')}

But I'm not sure how fatQueries work with tree structures, which is also why I'd just like to reload the entire Organization.

Is this making any sense ?

Thanks!

nethsix nethsix · Accepted Answer · 2016-03-13T05:09:32

Overview

How about:

Treating Organization as your top-most container with Organization as root GraphQL fragment
Adding edges/node to Departments in Organization GraphQL fragment
Using Organization as the root of your fragments for DepartmentEditor, RaiseDepartmentPayMutation

Details

For Organization:

(a) Add edges/nodes to Departments

(b) Remove Organization in Departments

(c) Indicate where DepartmentEditor, and RaiseDepartmentPayMutation pick up their fragments

    fragments: {
      organization: () => Relay.QL`
        fragment on Organization {
          id,
          topLevelEmployees {
            id,
            name,
            pay,
            subordinates {
              id,
              name,
              pay,
            }
          },
          departments {
            edges {
              node {
                name,
                employees,
                ${DepartmentEditor.getFragment('department')},
              },
            },
          },
          ${RaiseDepartmentPayMutation.getFragment('organization')},
        },          
      `
    }

For DepartmentEditor, which is where you will call the RaiseDepartmentPayMutation in onClick(), pass in the this.props.department

// Call this when button to 'Raise Pay' is clicked
// this.props.department comes from
// ${DepartmentEditor.getFragment('department')}
onClick() {
  Relay.Store.update(
    new RaiseDepartmentPayMutation({
      department: this.props.department,
    })      
  );  
}

// Department data that you need for display, etc.
fragments: {
  department () => Relay.QL`
    fragment on Department {
      id,
      employees {
        id,
        name,
        pay,
      },
    },
  `
}

For RaiseDepartmentPayMutation, declare the arguments that caller of this mutation can pass in, using getVariables(), i.e., the Department argument when mutation is called by onClick()

// Declare that RaiseDepartmentPayMutation can accept a 
// departmentId, which you derive from this.props.department
// On the server side GraphQL schema, you need to use resolve to
// retrieve the correct department based on this departmentId
getVariables() {
  return {
    departmentId: this.props.department.id
  }
}

// Declare that Organization -> topLevelEmployees may change
// due to this mutation
getFatQuery() {
  return Relay.QL`
    fragment on Organization {
      topLevelEmployees
    }
  `
}

// Ensure that the organization ID is there
fragments: {
  organization: () => Relay.QL`

    fragment on Organization {
      id,
    },
  `
}

Relayjs fatquery not generating expected query

1 Answers