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

Question

I'm trying to implement cursor pagination and followed the examples in the doc but I keep getting an error saying 'Cannot query field "cursor" on type "Query"' .

I'm aware that the "cursor" field doesn't actually exist on the Accounts schema...but from what I'm reading from the docs.. you have to include it somewhere in the gql`` query. Furthermore, not sure if I'm missing anything but I'm a bit confused of how to structure my query to allow cursor pagination.

Original Query: (running this gives me no error)

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

New Query: (this gives "cannot find cursor field on accounts" error)

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

GraphQL wrapper:

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);

Any help would be appreciated to getting cursor pagination working!

Answer 1

Sounds like the cursor field isn't getting implemented on the server. Your Account type needs to have that field like so:

Account {
  cursor
  accountName
  accountId
}

For a convention on how to do cursor pagination, you should follow the standard Relay spec. You can read more about how it's implemented here in a Relay-compliant GraphQL API.

This would make your query look like this:

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

Each edge account has a cursor that corresponds to a node and will be auto-populated with globally-unique opaque cursor IDs from the server.

Hope this helps!