Question

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

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

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

<EmployeeTreeEditor Organization={organization} />

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

<DepartmentEditor Department={department} />

DepartmentEditor的中继查询如下所示：

    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中按下“提高支付”按钮时，我想完全重新加载组织的TopLevelEmployees，因为他们的支付可能已经改变。

问题是生成的查询基于Department :: Organization查询，只获取组织ID。

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

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

${Something.getFragment('Organization')}

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

这有什么意义吗？

谢谢！

Answer 1

<强>概述

怎么样：

以Organization作为根GraphQL片段将Organization视为最顶层的容器
在Departments GraphQL片段

Organization

使用Organization作为DepartmentEditor，RaiseDepartmentPayMutation

<强>详情

Organization：

（a）将边/节点添加到Departments

（b）删除Organization

Departments

（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，您将在RaiseDepartmentPayMutation中呼叫onClick()，传递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,
      },
    },
  `
}

对于RaiseDepartmentPayMutation，使用getVariables()声明此变异的调用者可以传入的参数，即Department调用变异时的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没有生成预期的查询

1 个答案: