reactjs - 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 来切换 View 中该日历的显示/隐藏。

我遇到的问题(这让我头晕)是日/周/月/议程组件是组合 View ——也就是说，它们需要来自所有选定事件的数据。

情节变得更加复杂

现在，这听起来不错 - 让 CalendarView 设置 calendarId 变量并向下传递结果事件，对吧？嗯……有点。现在，CalendarView 的片段是使用一组 calendarIds 构建的，这样打开或关闭一个calendar 就会改变整个树的内容。被获取。

陷阱？

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

按代码编写:

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

是一个完全不同的获取来源:

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

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

理论上，我可以为每个日历创建一个容器，但是如何组合这些日历上的事件并将它们通过管道传输到公共(public)子组件中？日历无法分层，因为事件需要根据其他事件移动，即使是单独日历上的事件(左/右移动以并排显示它们)。

想法？我的脑子好痛。

Answer 1

Put code-wise, calendar(calendarIds: [1, 2]) is an entirely different query from calendar(calendarIds: [1, 2, 3])

是的。 GraphQL 不会为字段参数分配语义，因此 Relay(或任何其他 GraphQL 客户端)不知道 calendarIds 参数对应于结果的 id。不过，这是一个足够常见的用例，Relay 支持特殊的 nodes(ids: [ID!]) 根字段(在查询类型上)，该字段按照您的预期进行处理。要使用它，请在架构中实现一个 nodes 字段，该字段将结果作为数组返回，其顺序与输入 id 的顺序匹配，对于无法加载的任何结果使用 null 条目。例如。如果输入 ID 为 [1,2,3]，您将返回 [result1, result2, result3]。使用此字段时，Relay 会将参数与先前获取的数据进行比较(因为它假设此特定字段的参数具有 ids 的语义)。