1

我正在尝试过滤和分页与现代中继和分页容器的连接。这可以正常工作，但是在过滤连接上触发 loadMore() 时不会传输过滤器。

这是我的 React 组件中的提交搜索表单代码，它使用过滤器参数重新获取连接。

  _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] 没有运气）。

我怎样才能使这项工作？感谢您抽出时间。

4

2 回答 2

1

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

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

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

于 2017-09-09T07:56:10.103 回答
1

createPaginationContainer帮助器现在允许您执行此操作。

一旦你开始工作，你就会loadMore在 props.relay 中有一个方法，而且你也会有一个refetchConnection可用的方法。

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

  loadMore = () => {
    this.props.relay.loadMore(10)
  }
于 2017-09-15T01:59:53.823 回答