0

我已经在研究分页了。

我为此使用了 PaginationContainer。它可以工作，但不是我想要的。我得到了下一个调用 props.relay.loadMore(2) 函数的按钮。因此，当我单击此按钮时，它将调用查询并添加我另外 2 个项目到列表。它的工作原理就像加载更多。但我不想将这两个新项目添加到列表中，而是用新项目替换旧项目。

我尝试使用这个 getFragmentVariables 来修改从商店读取的变量，但它不起作用。

以前有人想法或实施过类似的东西吗？

class QueuesBookingsList extends Component {
  props: Props;

  handleLoadMore = () => {
    const { hasMore, isLoading, loadMore } = this.props.relay;
    console.log('hasMore', hasMore());
    if (!hasMore() || isLoading()) {
      return;
    }
    this.setState({ isLoading });
    loadMore(1, () => {
      this.setState({ isLoading: false });
    });
  };

  getItems = () => {
    const edges = idx(this.props, _ => _.data.queuesBookings.edges) || [];
    return edges.map(edge => edge && edge.node);
  };

  getItemUrl = ({ bid }: { bid: number }) => getDetailUrlWithId(BOOKING, bid);

  render() {
    return (
      <div>
        <button onClick={this.handleLoadMore}>TEST</button>
        <GenericList
          displayValue={'bid'}
          items={this.getItems()}
          itemUrl={this.getItemUrl}
          emptyText="No matching booking found"
        />
      </div>
    );
  }
}

export default createPaginationContainer(
  QueuesBookingsList,
  {
    data: graphql`
      fragment QueuesBookingsList_data on RootQuery {
        queuesBookings(first: $count, after: $after, queueId: $queueId)
          @connection(
            key: "QueuesBookingsList_queuesBookings"
            filters: ["queueId"]
          ) {
          edges {
            cursor
            node {
              id
              bid
              url
            }
          }
          pageInfo {
            endCursor
            hasNextPage
          }
        }
      }
    `,
  },
  {
    direction: 'forward',
    query: graphql`
      query QueuesBookingsListQuery(
        $count: Int!
        $after: String
        $queueId: ID
      ) {
        ...QueuesBookingsList_data
      }
    `,
    getConnectionFromProps(props) {
      return props.data && props.data.queuesBookings;
    },
    getFragmentVariables(prevVars, totalCount) {
      console.log({ prevVars });
      return {
        ...prevVars,
        count: totalCount,
      };
    },
    getVariables(props, variables, fragmentVariables) {
      return {
        count: variables.count,
        after: variables.cursor,
        queueId: fragmentVariables.queueId,
      };
    },
  },
);
4

1 回答 1

0

据我所知，有两种解决方案，对 Pagination Container 使用 refechConnection 方法或使用 Refech Container。

于 2018-02-14T11:40:23.330 回答