中继分页：如何初始化 "after" 值？

Question

所以根据这里的评论，我已经能够拼凑出一个简单的 "paginating" component/container：https://github.com/facebook/graphql/issues/4#issuecomment-118162627

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

我通过查看浏览器中 /graphql 响应的边缘光标来让它工作。问题是..当我没有 "prior query" 可以工作时，我如何为 first "page" 项工作？

我尝试在查询中将 after 保留为 undefined，但我只收到以下错误：

Uncaught Invariant Violation: callsFromGraphQL(): Expected a declared value for variable, $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：在这种情况下，这意味着在 initialVariables 中指定 curs: null。我们需要明确的 null 来帮助确保开发人员不会忘记指定值。

中继分页：如何初始化 "after" 值？

Relay Pagination: How to initialize "after" value?

pagination

reactjs

relayjs

graphql

graphql-js