GraphQL 和中继过滤 UI

Question

提示

如果您要使用中继构建 Google 日历，您将如何构造 GraphQL 模式和中继 containers/components 以正确处理显示和隐藏多个日历？

尝试

人们可能会想象这样一个模式：

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 在视图中切换该日历的 showing/hiding。

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

剧情变厚

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

疑难杂症？

据我所知，中继将 calendarIds 的每个组合视为完全不同的获取。因此，当我打开一个新的 id 时，它会获取所有事件，即使对于那些我已经获取的日历也是如此。

按代码放置：

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

是完全不同的抓取：

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

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

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

想法？我的脑袋疼。

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!]) 根字段（在 Query 类型上），它被视为您所期望的。要使用它，请在您的模式中实现一个 nodes 字段，该字段 return 的结果是一个数组，其顺序与输入 ID 的顺序匹配，对于无法加载的任何结果都包含空条目。例如。如果输入 ID 是 [1,2,3]，你会 return [result1, result2, result3]。使用此字段时，Relay 会将参数参数与先前获取的数据进行比较（因为它假设此特定字段的参数具有与 ids 相同的语义含义）。

GraphQL 和中继过滤 UI

GraphQL & Relay Filtering UI

reactjs

graphql

relayjs