Reactjs 与Apollo客户一起处理前端的渐进式披露

在我的项目中，我们计划实现渐进式公开（如果用户有权限，则显示部分UI数据）。基本上，我们使用带有hooks+graphqltag的react+apollo客户端

但问题不在于如何隐藏UI的某些部分，而在于如何按权限分割查询。所以现在对于页面，我们创建一个查询，其中包含不同类型数据的许多“子查询”。例如：

export const GET_DATA_X= gql`
  query getDataX(
    $applicationId: ID!
    $dateFrom: String!
    $dateTo: String!
    $displayMode: String!
  ) {
    applicationShipDates(
      applicationId: $applicationId
      dateFrom: $dateFrom
      dateTo: $dateTo
      displayMode: $displayMode
    ) {
      periodStartDate
      dates
    }
    graphStatistics(
      applicationId: $applicationId
      dateFrom: $dateFrom
      dateTo: $dateTo
    ) {
      totalVisits
      totalConversions
      conversionRate
    }
  }
`;

现在，如果用户有权限，查询的每个部分都将可用。在后端，它已经被处理了。我们抛出空/空数组和错误。但在我看来，我们甚至不应该要求提供这部分数据。这就是问题所在。你对如何与阿波罗客户合作有什么建议吗

现在我有两个关于如何做到这一点的想法：

如果用户有权限，将查询拆分为单个查询并进行几个API调用，否则跳过它

编写一个自定义函数，其中我将作为对象的prop数组传递，包括查询定义和查询所需的权限。我将根据权限和小查询定义（如

applicationShipDates

或

graphStatistics

）筛选此数组。我将创建一个大查询（如

getDataX

），其中将包含很少的“子查询”

---

如@xadm所述，指令将是最佳解决方案。

？是的，这似乎是最佳解决方案。