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

`}

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

RaiseDepartmentPayMutation的fatQuery如下所示：

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

      fragment on Department
      {
         Organization
      }

   `}

RaiseDepartmentPayMutation返回一个OrganizationPayload。

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

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

我猜如果我将组织传递给DepartmentEditor而不是部门，那么它可能会获取TopLevelEmployees，但我不能一直将我的组织传递给子控件。

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

${Something.getFragment('Organization')}

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

这有什么意义吗？

谢谢!

Answer 1

概述

这样如何：

1. 将Organization作为您最顶层的容器，并将Organization作为根fragment
2. Adding fragment
3. Using /node to Organization GraphQL GraphQL Organization中的节点作为DepartmentEditor，RaiseDepartmentPayMutation

的片段的根

详细信息

适用于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')},
        },          
      `
    }

对于DepartmentEditor的

1. (您将在其中调用onClick()中的RaiseDepartmentPayMutation )，将this.props.department

//点击‘加薪’按钮时调用此函数// this.props.department来自// ${DepartmentEditor.getFragment(‘部门’)} onClick() { Relay.Store.update(新部门({RaiseDepartmentPayMutation: this.props.department，}) )；} //显示所需的部门数据等片段：{ Department () => Relay.QLfragment on Department { id, employees { id, name, pay, }, }, }

• For RaiseDepartmentPayMutation，声明此突变的调用者可以传入的参数，使用getVariables()，即onClick()调用突变时的Department参数

//声明组织可以接受从this.props.department派生的// departmentId //在服务器端GraphQL架构上，您需要使用resolve根据此组织片段() { departmentId { departmentId: this.props.department.id }} //检索正确的部门//声明组织-> topLevelEmployees可能会更改//由于此突变getFatQuery() { return Relay.QLfragment on Organization { topLevelEmployees } } //确保组织ID在片段中：{departmentId：() => Relay.QLfragment on Organization { id, }, }