Question

我正在尝试使用Relay modern和分页容器过滤和分页连接。这样可以正常工作，但是当在过滤连接上触发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]没有运气）。

我该如何使这项工作？谢谢你花时间。

Answer 1

createPaginationContainer帮助现在可以让你这样做。

一旦你开始工作，你将在props.relay中使用loadMore方法，并且你还可以使用refetchConnection方法。

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

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

Answer 2

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

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

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

如何将过滤器参数传递给中继loadMore

2 个答案: