链接 Github 问题: https://github.com/facebook/relay/issues/1218
我们遇到了 Relay 的奇怪行为。我会尽力解释。
所以我们有一个“主”中继容器,它为相应的商店获取数据,还包括来自 Ticket 容器的片段。 票证容器呈现出具有过滤和排序功能的自定义表格。所以你可以看到在 StoreFrom 组件 StoreTicketList 容器中导入了所有必需的 Prop ,就像 Store 片段一样传递。
当您尝试过滤 StoreList Ticket 时出现问题,我的意思是设置过滤器或排序中继变量。 你会得到这个错误:
警告:RelayContainer:组件 TicketList
使用与用于获取片段的变量不同的变量呈现 Store
.该片段是使用变量 {"first":5,"after":null,"last":null,"before":null,"sort":null,"filter":null}
获取的,但使用变量呈现 {"first":5,"after":null,"last":null,"before":null,"sort":null,"filter":{"authorAccount":{"email":{"__e":"wrongEmail@email.com"}}}}
.这可以指示两种可能性之一:
- 父级在查询中设置了正确的变量 - TicketList.getFragment('Store', {...})
- 但在渲染组件时没有传递相同的变量。务必通过将变量作为 Prop 传递来告诉组件要使用哪些变量:<TicketList ... first={...} after={...} last={...} before={...} sort={...} filter={...} />
.
- 您故意将虚假数据传递给此组件,在这种情况下请忽略此警告。
但那些过滤器/排序变量在 StoreTicketList 上,它们不会像在本例中的 Store 容器到 StoreListTicket 容器那样从父容器传递到子容器。
export class StoreForm extends React.Component {
constructor(props) {
super(props);
const { Viewer: { store } } = props;
this.state = {
number: store && store.number !== null ? store.number : '',
};
}
handleInsert = (model) => {
console.log('Form mutation model : ', model);
};
render() {
const { Viewer, relay: { variables: { update } } } = this.props;
return (
<div>
<Form>
<FormTitle title='Store Info' />
<FormBody>
<TextField
required
fullWidth
name='number'
value={this.state.number}
floatingLabelText='Number'
/>
<StoreTicketList Store={this.props.Viewer.store} />
</FormBody>
</Form>
</div>
);
}
}
StoreForm 容器(主容器):
export default Relay.createContainer(StoreForm, {
initialVariables: {
id: null,
update: false
},
prepareVariables({ id = null }) {
return { id, update: (id !== null) };
},
fragments: {
Viewer: (variables) => Relay.QL`
fragment on Viewer {
store(id: $id) @include(if: $update) {
id,
number
${StoreTIcketList.getFragment('Store')}
}
}
`
}
});
票证容器:
export const StoreTicketList = Relay.createContainer(TicketList, {
initialVariables: {
first: 5,
after: null,
last: null,
before: null,
sort: null,
filter: null
},
fragments: {
Store: () => Relay.QL`
fragment on Store {
ticketConnection(first: $first, after: $after, last: $last, before: $before, sort: $sort, filter: $filter) {
count,
pageInfo {
hasNextPage,
hasPreviousPage,
startCursor,
endCursor
},
edges{
node{
created,
subject
}
}
}
}
`
}
});
我们构建了自己的连接表 HOC 组件,为每个容器呈现表。在这个组件中还有使用 this.props.relay.setVariables()
的排序和过滤功能。 .
因此,StoreListTicket 呈现为 ConnectionTable,它向下传递中继 Prop 对象,如果用户单击表列标题,组件将生成一个排序对象数组。
function connectionTableHOC(ComposedComponent) {
class EnhanceTable extends React.Component {
constructor(props) {
super(props);
}
sortHandler = (sortArray) => {
const { relay, relay: { variables } } = this.props;
relay.setVariables({
first: variables.first || variables.last,
after: null,
last: null,
before: null,
sort: sortArray
});
};
filterHandler = (filterObj) => {
const { relay, relay: { variables } } = this.props;
relay.setVariables({
first: variables.first || variables.last,
after: null,
last: null,
before: null,
filter: filterObj
});
};
render() {
return <ComposedComponent {...this.props} />;
}
}
最佳答案
事实证明你需要做两件事:
首先,将 Prop 传递到组件中,如 Joe Savona 所述。我正在使用 react-relay-router,所以对我来说这是添加这一行的问题
<Route path="interviews">
<IndexRoute component={InterviewsList} queries={ViewerQuery} />
<Route path=":id" component={InterviewSession} queries={NodeViewerQuery}
render={({ props }) => props ? <InterviewSession {...props} /> : <Loading />}/> // <--- this line
</Route>
其次,您必须将变量的值注入(inject)到 getFragment
函数调用中,如下所示:
fragments: {
Viewer: (variables) => Relay.QL`
fragment on Viewer {
store(id: $id) @include(if: $update) {
id,
number
${StoreTIcketList.getFragment('Store', {... variables})} // <---- this thing!
}
}
`
}
请注意,如果您在根查询中使用 getFragment
,variables
将是第二个参数:
const NodeViewerQuery = {
node: (component, variables) => Relay.QL`query { // <---- extra "component" argument
node(id: $id) {
${component.getFragment('node', {...variables})}
}
}`,
关于javascript - 中继片段变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37866342/