如何通过过滤器参数继电器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]没有运气）。

我该如何做这项工作？感谢您抽出时间。

来源

2017-09-06 user2172221

我最终通过将搜索逻辑放入根查询容器中来分离搜索和分页。

虽然它正在工作并满足我的需求，但由于重新装入根级，它并不理想。

我可能应该将分页容器包装在重新读取容器中作为更好的解决方案。

来源

2017-09-09 07:56:10 user2172221

createPaginationContainer帮手现在可以让你做到这一点。

一旦你得到这个工作，你将在props.relay中有一个loadMore方法，并且你也将有一个refetchConnection方法可用。

filterCategory = ({slug}) => { 
    this.props.relay.refetchConnection(100, null, { 
     categoryName: slug 
    }) 
    } 

    loadMore =() => { 
    this.props.relay.loadMore(10) 
    }

来源

2017-09-15 01:59:53 Tim

如何通过过滤器参数继电器loadMore

回答

相关问题