Question

提示

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

THE ATTEMPT

有人可能会想到这样的架构：

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？

据我所知，中继将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的语义含义）。

GraphQL＆amp;中继过滤UI

1 个答案: