GraphQL和中继过滤UI-Java 学习之路

THE PROMPT

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

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 组件是组合视图 - 也就是说，它们需要来自所有选定事件的数据 .

THE PLOT THICKENS

现在，这听起来很好 - 让 CalendarView 设置calendarId变量并将结果事件传递下来，对吧？嗯...有点儿 . 现在 CalendarView 的片段由一组 calendarIds 构成，这样打开或关闭一个 calendar 会改变要获取的整个树 .

THE GOTCHA?

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

放入代码：

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

是完全不同的取自：

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

这是不好的 . 这些日历上可能会有很多事件，并且过度获取是一个杀手 .

从理论上讲，我可以为每个日历创建一个容器，但是如何将这些日历上的事件组合在一起并将它们组合成一个公共子组件？日历无法分层，因为事件需要四处移动以响应其他事件，即使是在不同日历上的事件（向左/向右移动以并排显示它们） .

思考？我的脑袋疼 .

1 回答

3

放置代码，日历（calendarIds：[1,2]）是一个完全不同的日历查询（calendarIds：[1,2,3]）

对 . GraphQL不知道 calendarIds 参数对应于结果的ID . 但是，这是一个很常见的用例，即Relay支持一个特殊的 nodes(ids: [ID!]) 根字段（在Query类型上），它被视为您所期望的 . 要使用它，请在模式中实现 nodes 字段，该字段将结果返回为与输入ID的顺序匹配的数组，对于无法加载的任何结果，使用空条目 . 例如 . 如果输入ID是 [1,2,3] ，则返回 [result1, result2, result3] . 使用此字段时，Relay将根据先前获取的数据区分参数参数（因为它假设此特定字段的参数具有ids的语义含义） .

回复于 2024-04-29T23:51:49+08:00

GraphQL和中继过滤UI

1 回答

相关问题