graphql: как правильно обрабатывать предыдущую страницу, следующую страницу, последнюю страницу и первую страницу?

Question

Для интерфейса я использую React + Relay.У меня есть некоторое соединение в бэкэнде, которое можно запросить, например:

query Query {
    node(id: 123456) {
        teams(first: 10) {
            node {
                id
                name
            }
            page_info {
                start_cursor
                end_cursor
            }
        }
    }
}

Так что для традиционного подхода я могу использовать skip PAGE_SIZE * curr limit PAGE_SIZE для запроса следующей страницы, предыдущей страницы и первой страницы и последней страницы (вфакт, что я могу запросить случайную страницу)

Но как мне реализовать интерфейс, чтобы сделать эти запросы элегантно?

Answer 1

@ Junchao, что Винсент сказал правильно.Кроме того, у вас должен быть запрос на повторную выборку и отправку refetchVariables с обновленным значением first.Я постараюсь предоставить вам пример:

export default createRefetchContainer(
  TeamsComponent,
  {
    query: graphql`
      fragment TeamsComponent_query on Query
        @argumentDefinitions(
          first: { type: Int }
          last: { type: Int }
          before: { type: String }
          after: { type: String }
        ) {
        teams(
          id: { type: "ID!" }
          first: { type: Int }
          last: { type: Int }
          before: { type: String }
          after: { type: String }
        ) @connection(key: "TeamsComponent_teams", filters: []) {
          count
          pageInfo {
            endCursor
            hasNextPage
          }
          edges {
            node {
              id
               name
            }
          }
        }
      }
    `,
  },
  graphql`
    query TeamsComponent(
      $after: String
      $before: String
      $first: Int
      $last: Int
    ) {
        ...TeamsComponent_query
          @arguments(
            first: $first
            last: $last
            after: $after
            before: $before
          )
    }
  `,
);

Я пытался построить пример на основе вашего кода.Это в основном идея.Нижний запрос - это повторный выбор.Наряду с этим вы должны каким-то образом инициировать повторную выборку, позвонив по номеру this.props.relay.refetch, передавая renderVaribles.Внимательно изучите документы по этому поводу.Надеюсь, что это помогает:)

ОБНОВЛЕНИЕ:

Просто чтобы добавить что-то, вы могли бы иметь функцию handleLoadMore с чем-то вроде этого:

  handleLoadMore = () => {
    const { relay, connection } = this.props;
    const { isFetching } = this.state;

    if (!connection) return;

    const { edges, pageInfo } = connection;

    if (!pageInfo.hasNextPage) return;

    const total = edges.length + TOTAL_REFETCH_ITEMS;

    const fragmentRenderVariables = this.getRenderVariables() || {};
    const renderVariables = { first: total, ...fragmentRenderVariables };

    if (isFetching) {
      // do not loadMore if it is still loading more or searching
      return;
    }

    this.setState({
      isFetching: true,
    });
    const refetchVariables = fragmentVariables => ({
      first: TOTAL_REFETCH_ITEMS,
      after: pageInfo.endCursor,
    });

    relay.refetch(
      refetchVariables,
      null,
      () => {
        this.setState({ isFetching: false });
      },
      {
        force: false,
      },
    );
  };

ОБНОВЛЕНИЕ 2:

Чтобы вернуться назад, вы можете получить что-то вроде:

  loadPageBackwardsVars = () => {
    const { connection, quantityPerPage } = this.props;
    const { quantity } = getFormatedQuery(location);

    const { endCursorOffset, startCursorOffset } = connection;

    const firstItem = connection.edges.slice(startCursorOffset, endCursorOffset)[0].cursor;

    const refetchVariables = fragmentVariables => ({
      ...fragmentVariables,
      ...this.getFragmentVariables(),
      last: parseInt(quantity || quantityPerPage, 10) || 10,
      first: null,
      before: firstItem,
    });

    return refetchVariables;
  };