pagination - 中继分页：如何初始化“之后”值？

Question

所以基于这里的评论，我已经能够一起破解一个简单的“分页”组件/容器：https ://github.com/facebook/graphql/issues/4#issuecomment-118162627

我说“hack”是因为我就是这么做的。

我通过查看/graphql浏览器响应中的边缘光标来使其工作。问题是..当我没有“事先查询”可以使用时，如何使这项工作适用于项目的第一“页”？

我尝试在查询中离开after，undefined但只收到以下错误：

未捕获的不变违规：callsFromGraphQL()：预期变量 $curs 的声明值。

看来，如果您在容器的片段中定义first和after，那么它们是必需的参数。但是我对 没有任何价值after，那么到底要如何初始化呢？

这个例子抛出了上面的错误：

export default Relay.createContainer(Widgets2, {
  initialVariables: {
    pageSize: 2
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        widgets(
          first: $pageSize,
          after: $curs
        ) {
          edges {
            cursor,
            node {
              id,
              name,
            },
          },
        },
      }
    `,
  },
});
//And in the React component:
nextPage () {
    let lastIndex = this.props.viewer.widgets.edges.length - 1
    this.props.relay.setVariables({
        curs: this.props.viewer.widgets.edges[lastIndex].cursor
    })
 }

Answer 1

好问题。在 Relay 中，必须为所有变量提供默认值。如果值未知，您可以使用null: 在这种情况下，这意味着指定curs: nullin initialVariables。我们需要一个明确null的帮助确保开发人员没有忘记指定一个值。