Question

我将所有单独的查询移动到我的主要查看组件中，并通过props将数据传递给每个组件。所以我可以为每个页面提供一个查询请求，而不是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
    }
  }
`;

是否有更好的方法仍然可以在每个页面上进行一次查询＆＃34;但是避免只有一个装载道具？

Answer 1

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

拆分每个＆＃34;子查询＆＃34;在它自己的查询元素中。
使用compose将所有查询合并在一起

这样的事情：

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

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

为每个＆＃34;子查询单独加载道具＆＃34;

1 个答案: