Изменение состояния, вызывающее GraphQL, снова запускается в реакции

Question

Я вижу один сценарий реакции при использовании GraphQL с ним. В следующем коде всякий раз, когда код приходит к методу onPaginationChange, он также переходит к методу getVariables и в конце концов вызывает метод GraphQL для получения данных. Как это происходит?

Влияет ли изменение состояния в методе onPaginationChange refre sh во всех местах, зависящих от состояния? Это реакция вещь? Или какая-то вещь в GraphQL? В приведенном ниже коде я указал основные вещи, которые мне пригодятся. Я удалил точную реализацию Таблицы, так как не думаю, что для ответа на этот вопрос потребуется.

import React, { Component } from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";

export const LIST_ITEMS = gql`
  query list(
    $pageIndex: Int
    $limit: Int
  ) {
    listItems(
      limit: $limit
      pageIndex: $pageIndex
    ) {
      items {
        name
        description
      }
      totalCount
    }
  }
`;

export class ManageItems extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPageIndex: 1,
      pagesCount: 1,
      pageSize: 30
    };
  }

  getVariables() {
    // It comes here whenever there onPaginationChange function is called. HOW?
    return {
      pageIndex: this.state.currentPageIndex - 1,
      limit: this.state.pageSize
    };
  }

  onPaginationChange({ detail }) {
    this.setState({
      currentPageIndex: detail.currentPageIndex,
      pageSize: detail.pageSize
    });
  }

  render() {
    const { t } = this.props;

    return (
      <Query
        query={LIST_ITEMS}
        variables={this.getVariables()}}
      >
        {({ loading, error, data }) => {
          if (error)
            return ("error");

          return (
            <Table onPaginationChange={this.onPaginationChange.bind(this)}>
            </Table>
          );
        }}
      </Query>
    );
  }
}

export ManageItems;

Answer 1

Когда вы обновляете состояние в React (используя this.setState()), компонент перерисовывается. Вот почему this.getVariables() будет выполнен. Если переменные отличаются от того, что вы ранее вводили в запрос, apollo извлечет ваш бэкэнд.

Я предлагаю вам изучить fetchMore из react-apollo или создать запрос GraphQL внутри компонента, который обрабатывает только одна страница.