如何通过过滤器参数继电器loadMore
问题描述:
我想过滤和分页与现代和分页容器的连接。这工作正常,但在过滤的连接上触发loadMore()时不会传输过滤器。如何通过过滤器参数继电器loadMore
这是我在我的React组件中提交搜索表单代码,它使用filter参数重新获取连接。
_onSubmit = (event) => {
event.preventDefault();
this.props.relay.refetchConnection(
ITEMS_PER_PAGE,
null,
{matching: this.state.search}
);
}
工作正常,因为容器在重新加载时被过滤。现在
当我
_loadMore =() => {
const {relay, store} = this.props;
if (!relay.hasMore() || relay.isLoading()) return;
relay.loadMore(
ITEMS_PER_PAGE, // Fetch the next feed items
e => {if (e) console.log(e)},
{matching: this.state.search}
);
}
装载更多的匹配参数不活跃了,而我得到的完整列表回来了。
在分页容器中,我将getVariables()设置为包含匹配值,console.log(fragmentVariables.matching)在此处具有正确的值。
getVariables(props, {count, cursor}, fragmentVariables) {
return {
count,
cursor,
matching: fragmentVariables.matching
};
},
query: graphql.experimental`
query playersStoreQuery(
$count: Int!
$cursor: String
$matching: String
) {
store {
players(
first: $count
after: $cursor
matching: $matching
) @connection(key: "playersStore_players") { ...
但是新的连接没有被过滤。
我怀疑问题出在_loadMore()调用,正是在relay.loadMore()
还是在@connection指令,它应该支持一个过滤器键(我试过过滤器:[$的MatchString]没有运气)。
我该如何做这项工作?感谢您抽出时间。
答
我最终通过将搜索逻辑放入根查询容器中来分离搜索和分页。
虽然它正在工作并满足我的需求,但由于重新装入根级,它并不理想。
我可能应该将分页容器包装在重新读取容器中作为更好的解决方案。
答
createPaginationContainer帮手现在可以让你做到这一点。
一旦你得到这个工作,你将在props.relay中有一个loadMore
方法,并且你也将有一个refetchConnection
方法可用。
filterCategory = ({slug}) => {
this.props.relay.refetchConnection(100, null, {
categoryName: slug
})
}
loadMore =() => {
this.props.relay.loadMore(10)
}