Relayjs fatquery not generating expected query

≡放荡痞女 提交于 2020-01-06 07:43:12

问题


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!


回答1:


Overview

How about:

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

Details

  1. 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')},
        },          
      `
    }
  1. 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,
          },
        },
      `
    }
    
  2. 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,
        },
      `
    }
    


来源:https://stackoverflow.com/questions/34585808/relayjs-fatquery-not-generating-expected-query

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!