问题
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:
- Treating
Organization
as your top-most container withOrganization
as root GraphQL fragment - Adding edges/node to
Departments
inOrganization
GraphQL fragment - Using
Organization
as the root of your fragments forDepartmentEditor
,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 theRaiseDepartmentPayMutation
inonClick()
, pass in thethis.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, usinggetVariables()
, i.e., theDepartment
argument when mutation is called byonClick()
// 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