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变量并将结果事件传递下来,对吧？嗯...有点儿.现在片段for CalendarView用一组构造calendarIds,这样calendar打开或关闭一个片段就会改变要获取的整个树.

GOTCHA？

据我所知,中继将每种组合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!])根字段（在查询类型上），该字段按照您的预期进行处理。要使用它，请nodes在架构中实现一个字段，该字段将结果作为数组返回，其顺序与输入 id 的顺序匹配，对于无法加载的任何结果使用 null 条目。例如，如果输入 id 是[1,2,3]，您将返回[result1, result2, result3]。使用此字段时，Relay 会将参数与先前获取的数据进行比较（因为它假设此特定字段的参数具有 ids 的语义）。