Question

我已阅读https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayPaginationContainer.js和https://facebook.github.io/relay/docs/pagination-container.html

我的计数变量正在运行，我认为我已经正确设置但我无法加载更多项目，而且我的hasMore是假的，这意味着我没有更多的待办事项显示。这是我的代码：

export default createPaginationContainer(TodoList,
  {
    viewer: graphql`
            fragment TodoList_viewer on User {
              todos(
                first: $count  # 
              ) @connection(key: "TodoList_todos") {
                edges {
                  node {
                    id,
                    complete,
                    ...Todo_todo,
                  },
                },
              },
              id,
              totalCount,
              completedCount,
              ...Todo_viewer,
            }
        `,
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      console.log("getConnectionFromProps props ",props)
      return props.viewer && props.viewer.todos;
    },
    getFragmentVariables(prevVars, totalCount) {
      console.log("getFragmentVariables total count ",totalCount )
      return {
        ...prevVars,
        count: totalCount, // the total of displayed todos on the fragment
      };
    },
    getVariables(props, {count}, fragmentVariables) {
      console.log("getVariables count ",count)
      return {
        count,
        // cursor,
        // in most cases, for variables other than connection filters like
        // `first`, `after`, etc. you may want to use the previous values.
        // orderBy: fragmentVariables.orderBy,
      };
    },
    query: graphql`
      query TodoListPaginationQuery( # assign component name + Pagination + Query
        $count: Int!
      ) {
        viewer {
          # You could reference the fragment defined previously.
          ...TodoList_viewer
        }
      }
    `
  });

我不知道我在这里做错了什么。也许如果你知道一个工作样本（我在github中找不到），我真的很感激

Answer 1

您的服务器是否正确公开了连接的pageInfo？ TodoConnection类型应包含以下字段

edges: [TodoEdge]
pageInfo: PageInfo!

PageInfo类型应包含以下字段：

endCursor: String
When paginating forwards, the cursor to continue.

hasNextPage: Boolean!
When paginating forwards, are there more items?

hasPreviousPage: Boolean!
When paginating backwards, are there more items?

startCursor: String
When paginating backwards, the cursor to continue.

我也找不到一个例子，但我建议你看看那些类型/字段。如果您在堆栈中安装了GraphiQL，那么您也可以尝试手动查询以丢弃任何与服务器相关的问题。

Answer 2

您使用的是什么版本的React-Relay？您可以尝试使用1.5.0，我遇到同样的问题，但我现在无法升级1.5.0。

我认为1.5.0版可能会解决这个问题： https://github.com/facebook/relay/releases/tag/v1.5.0

修复提交：

在Pagination Container
修复空连接上的分页

即使有更多项目，我也无法在继电器中执行loadMore？

2 个答案: