Relayjs fatquery没有生成预期的查询

Question

我有一个看起来/工作起来有点像这样的伪结构：

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

我有一个显示员工树结构的控件

<EmployeeTreeEditor Organization={organization} />

然后我有一个单独编辑部门的控件

<DepartmentEditor Department={department} />

DepartmentEditor 的 Relay 查询如下所示：

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

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

`}

DepartmentEditor 中有一个按钮，可以使用 RaiseDepartmentPayMutation 将该部门所有员工的工资提高 10%。

RaiseDepartmentPayMutation 的 fatQuery 如下所示：

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

      fragment on Department
      {
         Organization
      }

   `}

RaiseDepartmentPayMutation 返回一个 OrganizationPayload。

当在 DepartmentEditor 中按下 Raise Pay 按钮时，我想完全重新加载组织的 TopLevelEmployees，因为他们的工资可能已经改变。

问题是生成的查询是基于 Department::Organization 查询并且只获取组织 id。

我想如果我将 Organization 传递给 DepartmentEditor 而不是 Department，那么它可能会获取 TopLevelEmployees，但我不能继续将我的 Organization 传递给子控件。

我看到的另一个解决方案可能是在 EmployeeTreeEditor 和 Mutation fatQuery 中包含一个单独的片段

${Something.getFragment('Organization')}

但我不确定 fatQueries 如何处理树结构，这也是我想重新加载整个组织的原因。

这有意义吗？

谢谢！

Answer 1

概述

怎么样：

1. 将Organization 视为最顶层容器，Organization 作为根 GraphQL 片段
2. 将边/节点添加到 Departments 中的 Organization GraphQL 片段
3. 使用Organization 作为DepartmentEditor、RaiseDepartmentPayMutation 的片段的根

详情

1. 对于Organization：

(a) 将边/节点添加到Departments

(b) 删除Departments 中的Organization

(c) 指出DepartmentEditor 和RaiseDepartmentPayMutation 在哪里拾取它们的片段

    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. 对于DepartmentEditor，您将在onClick() 中调用RaiseDepartmentPayMutation，传入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. 对于RaiseDepartmentPayMutation，声明这个突变的调用者可以传入的参数，使用getVariables()，即onClick()调用突变时的Department参数

   // 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,
       },
     `
   }