每个 "subquery" 的单独加载道具

Question

我将所有单独的查询移动到我的主要查看组件中，并通过道具将数据传递给每个组件。所以我可以对每个页面有一个查询请求，而不是 5 或 6。

现在我面临第一个问题。我有 2 个变量查询，当我修改一个变量时，它将 data:{ loading } 属性设置为 true 所以我的整个界面都显示一个加载微调器，即使实际上只有一件事正在加载。

Here how it lookls like if I press a button on the top right

我的查询对象如下所示：

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
    }
  }
`;

是否有更好的方法让每个 "page" 仍然有一个查询但避免只有一个加载道具？

Answer 1

我可能已经找到了解决方案。

将每个 "subquery" 拆分为自己的查询元素。
使用compose将所有查询合并在一起

像这样：

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

如您所见：https://www.apollographql.com/docs/react/basics/setup.html#compose

每个 "subquery" 的单独加载道具

Separate loading prop for each "subquery"

react-apollo