为每个“子查询”分别加载道具

Question

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

现在我正面临着我的第一个问题。我有2个带变量的查询，当我修改变量时，它将data:{ loading } prop设置为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
    }
  }
`;

是否有更好的方法仍然只有一个查询每个“页面”，但避免只有一个加载道具？

Answer 1

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

1. 在自己的查询元素中拆分每个“子查询”。
2. 使用compose将所有查询合并在一起

像这样的东西：

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

正如你在这里看到的：https://www.apollographql.com/docs/react/basics/setup.html#compose