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更改要获取的整个树。

GOTCHA？

据我所知，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])查询calendar(calendarIds: [1, 2, 3])

对。 GraphQL没有为字段参数赋予语义，因此Relay（也没有任何其他GraphQL客户端）不知道calendarIds参数对应于结果的id。 但是，这是一个常见的用例，即Relay支持特殊nodes(ids: [ID!])根域（在Query类型上），它们按照您的预期处理。 要使用它，请在模式中实现一个nodes字段，该字段将结果作为一个数组返回，该数组的顺序与输入ID的顺序相匹配，对于任何无法加载的结果都使用null条目。 例如，如果输入id为[1,2,3] ，则返回[result1, result2, result3] 。 使用此字段时，Relay将针对先前获取的数据区分参数参数（因为它假设此特定字段的参数具有ids的语义含义）。