GraphQL 和中继过滤 UI

Question

提示

如果您要使用中继构建 Google 日历，您将如何构建 GraphQL 架构和中继容器/组件以正确处理显示和隐藏多个日历？

尝试

人们可能会想像这样的架构：

viewer {
  user {
    calendars(calendarIds: [String]) {
      edges,
        node {
          name,
          id,
          events(dates: [Date]) {
            ... edges, node, eventinfo...
          }
        }
      }
    }
  }
}

所以，我可以拉下所有日历和所有事件，或者一个特定的日历，或者你有什么。

构建中继容器和组件，我会想象以下内容：

<CalendarView Container>
  <CalendarView>
    <WeekView> or <MonthView> or <Agenda> etc...
      <Event>

这样 CalendarView 中继容器设置请求日历的片段，CalenderView 组件使用setVariables 来切换视图中该日历的显示/隐藏。

我遇到的问题（这让我头晕目眩）是Day/Week/Month/Agenda 组件是组合视图——也就是说，它们需要来自所有选定的事件。

情节变厚

现在，听起来不错 - 让 CalendarView 设置 calendarId 变量并将结果事件向下传递，对吗？嗯……有点。现在CalendarView 的片段由一组calendarIds 构成，因此打开或关闭一个calendar 会更改要获取的整个树。

有什么问题吗？

据我所知，relay 将calendarIds 的每个组合视为完全不同的提取。所以，当我打开一个新的id 时，它会获取所有事件，即使是我已经获取的那些日历。

按代码放置：

fragment calendar(calendarIds: [1, 2]) { ... } 

是一个完全不同的获取方式：

fragment calendar(calendarIds: [1, 2, 3]) { ... }

这……糟糕。这些日历上可能有很多事件，而过度获取是一个杀手。

理论上，我可以为每个日历创建一个容器，但是我如何将这些日历上的事件组合起来，并将它们传送到一个公共子组件中呢？日历不能分层，因为事件需要移动以响应其他事件，即使是单独日历上的事件（左/右移动以并排显示）。

想法？我的脑袋好痛。

Answer 1

在代码方面，calendar(calendarIds: [1, 2]) 是与 calendar(calendarIds: [1, 2, 3]) 完全不同的查询

是的。 GraphQL 不为字段参数分配语义，因此 Relay（或任何其他 GraphQL 客户端）不知道 calendarIds 参数对应于结果的 id。不过，这是一个足够常见的用例，Relay 支持一个特殊的 nodes(ids: [ID!]) 根字段（在 Query 类型上），该字段被视为您所期望的。要使用它，请在您的架构中实现一个 nodes 字段，该字段以数组的形式返回结果，其顺序与输入 ID 的顺序匹配，对于任何无法加载的结果，都包含空条目。例如。如果输入 ID 是 [1,2,3]，您将返回 [result1, result2, result3]。使用此字段时，Relay 将根据先前获取的数据区分参数参数（因为它假设此特定字段的参数具有 ids 的语义含义）。