javascript - 如何将过滤器参数传递给中继负载更多

Question

我正在尝试过滤和分页与 Relay modern 和分页容器的连接。这工作正常，但在过滤连接上触发 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] 但没有成功)。

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

Answer 1

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

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

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