Question

我已经在分页了。

我使用了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,
      };
    },
  },
);

Answer 1

正如我所知，有两种解决方案，使用refechConnection方法处理分页容器或使用Refech容器。

继电器现代 - 分页

1 个答案: