Apollo / GraphQL的光标分页一直给我错误

时间:2017-05-11 15:50:42

标签: pagination graphql apollo react-apollo

我正在尝试实现光标分页并按照文档中的示例进行操作,但我不断收到错误,说明'无法在类型“查询”'上查询字段“光标”。

我知道“游标”字段实际上并不存在于帐户架构中......但是我从文档中读取的内容......你必须将它包含在gql``查询的某个地方。此外,不确定我是否遗漏了任何东西,但我对如何构造我的查询以允许光标分页感到困惑。

原始查询:(运行此操作不会出错)

const AccountsQuery = gql`
  query {
    accounts {
      accountName
      accountId
    }
  }
`;

新查询:(这表示“无法在帐户中找到光标字段”错误)

const AccountsQuery = gql`
  query Accounts($cursor: String){
    accounts(cursor: $cursor) {
      cursor
      accountName
      accountId
    }
  }
`;

GraphQL包装器:

export default graphql(AccountsQuery, {
  props: ({ data: { loading, cursor, accounts, fetchmore } }) => ({
    loading,
    accounts,
    loadMoreEntries() {
      return fetchmore({
        query: AccountsQuery,
        variables: {
          cursor: cursor,
        },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const previousEntry = previousResult.entry;
          const newAccounts = fetchMoreResult.accounts;

          return {
            cursor: fetchMoreResult.cursor,
            entry: {
              accounts: [...newAccounts, ...previousEntry]
            },
          };
        },
      })
    }
  })
})(QuickViewContainer);

任何帮助都会感激光标分页的工作!

1 个答案:

答案 0 :(得分:3)

听起来cursor字段未在服务器上实现。您的Account类型需要具有以下字段:

Account {
  cursor
  accountName
  accountId
}

有关如何进行光标分页的约定,您应该遵循标准的中继规范。您可以在符合Relay标准的GraphQL API中read more about how it's implemented here

这会使您的查询如下所示:

query {
  viewer {
    allAccounts {
      edges {
        cursor
        node {
          accountName
          accountId
        }
      }
    }
  }
}

每个边缘帐户都有一个与节点对应的游标,并且将从服务器自动填充全局唯一的不透明游标ID。

希望这有帮助!