Отдельная загрузка реквизита для каждого "подзапроса"

Question

Я перемещаю все отдельные запросы в свой основной компонент просмотра и передаю данные через реквизиты каждому компоненту. Таким образом, у меня может быть один запрос для каждой страницы вместо 5 или 6.

Теперь я сталкиваюсь с моей первой проблемой. У меня есть 2 запроса с переменными, и когда я изменяю переменную, он устанавливает data:{ loading } опора для true так что весь мой интерфейс показывает загрузчик, даже если загружается только одна вещь.

Вот как это выглядит, если я нажимаю кнопку в правом верхнем углу

Мой объект запроса выглядит так:

const query = gql`
  query SumaryPage($limitIOChart: Int!, $limitAHChat: Int!) {
    IOBalance: getIncomeOutcome(limit: 1) {
      income
      outcome
      total
    }
    AccountBalanceData: getAccountBalance {
      id
      name
      balance
    }
    TransactionHistoryData: getTransactions(limit: 5) {
      id
      name
      amount
      date
      type
    }
    IOChart: getIncomeOutcome(limit: $limitIOChart, orderBy: ASC) {
      month
      year
      income
      outcome
    }
    AmountHistoryData: getAmountHistory(limit: $limitAHChat, orderBy: ASC) {
      month
      year
      amount
    }
  }
`;

Есть ли лучший подход, чтобы по-прежнему иметь один запрос на "страницу", но избегать использования только одной загрузки?

Answer 1

Я, наверное, нашел решение для этого.

1. Разделите каждый "подзапрос" на собственный элемент запроса.
2. использование compose объединить все запросы вместе

Что-то вроде этого:

export default compose(
  graphql(`query { ... }`),
  graphql(`query { ... }`),
  graphql(`query { ... }`),
)(MyComponent);

Как вы можете видеть здесь: https://www.apollographql.com/docs/react/basics/setup.html