使用 Apollo 客户端处理前端的渐进式披露

Posted 2023-03-08

【中文标题】使用 Apollo 客户端处理前端的渐进式披露

【英文标题】：Handle progressive disclosure on frontend with Apollo Client

【发布时间】：2021-08-13 02:31:06

【问题描述】：

在我的项目中，我们计划实施渐进式披露（如果用户有权限，则显示部分 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
    
  
`;

如果用户有权限，现在这个查询的每个部分都将可用。在后端，它已经被处理了。我们抛出空/空数组和错误。但是IMO我们甚至不应该要求这部分数据。这就是问题所在。您对如何使用 apollo 客户端执行此操作有什么建议吗？

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

如果用户有权限，则将查询拆分为单个并进行几次 API 调用，否则跳过它 编写一个自定义函数，我将在其中传递对象的 prop 数组，包括查询定义和查询所需的权限。我将按权限过滤这个数组，并从像applicationShipDates 或graphStatistics 这样的小查询定义中过滤这个数组，我将创建一个像getDataX 这样的大查询，其中将包含很少的“子查询”

【问题讨论】：

graphql.org/learn/queries/#directives ?

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

【参考方案1】：

就像@xadm 提到的指令将是最好的解决方案。