Graphql cursor based pagination does not work with sorting

[danieljkahn]

I have a headless app which uses AEM Cloud to serve the data with the following persisted graphql query:

query (
  $locale: String!
  $path: ID!
  $sort: String
  $first: Int
  $after: String
) {
  pagePaginated(
    _locale: $locale
    filter: {
      _path: { _expressions: [{ value: $path, _operator: STARTS_WITH }] }
    }
    sort: $sort
    first: $first
    after: $after
  ) {
    edges {
      node {
        _path
        __typename
        title
        description {
          plaintext
        }
      }
      cursor
    }
    pageInfo {
      hasPreviousPage
      hasNextPage
      startCursor
      endCursor
    }
  }
}

I am getting an error with cursor based pagination whenever both the sort and after variables are present. When either is used independently, the query works as expected, such as either of these examples:

WORKS (But no sorting):

{
  "locale": "en",
  "sort": "",
  "first": 2,
  "path": "/path/to/my/content/",
  "after": "bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI="
}

WORKS (But no cursor supplied for pagination):

{
  "locale": "en",
  "sort": "title ASC",
  "first": 2,
  "path": "/path/to/my/content/",
  "after": ""
}

THE PROBLEM CASE

When both sort and after variables are supplied.

THROWS ERROR:

{
  "locale": "en",
  "sort": "title ASC",
  "first": 2,
  "path": "/path/to/my/content/",
  "after": "bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI="
}

This will return the following error:

{
  "errors": [
    {
      "message": "Exception while fetching data (/pagePaginated) : Start cursor not found in supplied data:bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI=",
      "locations": [
        {
          "line": 13,
          "column": 3
        }
      ],
      "path": [
        "pagePaginated"
      ],
      "extensions": {
        "classification": "DataFetchingException"
      }
    }
  ],
  "data": null
}

Am I missing something, or is this a bug in Adobe's implementation of GraphQL?

Please advise.

[aanchal-sikka]

@danieljkahn By default, paging uses the UUID of the repository node representing the fragment for ordering to ensure the order of results is always the same. When sort is used, the UUID is implicitly used to ensure a unique sort; even for two items with identical sort keys.

So, when we use the sort, the UUID are different.

Query-1:

query {
    adventurePaginated(first: 3, after: "MzIxMjljYmQtMzY5OS00MzdmLTg2YTQtZGFkNzkwM2E2M2Yz") {
        edges {
          cursor
          node {
            title
          }
        }
        pageInfo {
          endCursor
          hasNextPage
        }
    }
}

 Result:

{
  "data": {
    "adventurePaginated": {
      "edges": [
        {
          "cursor": "Mzk2NzhjOTUtZDVlMC00MTYyLWFiNDktNTFiMzhiNWU4Mzg5",
          "node": {
            "title": "Riverside Camping Australia"
          }
        },
        {
          "cursor": "NTc2Mzc0YmMtZTI1Yi00MjhmLWEyNDktMWI2MTVlNWMwY2Yw",
          "node": {
            "title": "Whistler Mountain Biking Adventure"
          }
        },
        {
          "cursor": "NTkzMjEwZDAtNmZmZS00MmM5LTgxOGYtZDc4MjVlMjFkOTNk",
          "node": {
            "title": "Cycling Tuscany"
          }
        }
      ],
      "pageInfo": {
        "endCursor": "NTkzMjEwZDAtNmZmZS00MmM5LTgxOGYtZDc4MjVlMjFkOTNk",
        "hasNextPage": true
      }
    }
  }
}

Query-2 with Sort:

query {
    adventurePaginated(first: 3, sort: "title", after: "T3Zlcm5pZ2h0IENvbG9yYWRvIFJvY2sgQ2xpbWJpbmcKYTM0MDk1NTgtYWQwMi00MjJhLTk5NTItYTg4MGVlMTZmMDZj") {
        edges {
          cursor
          node {
            title
          }
        }
        pageInfo {
          endCursor
          hasNextPage
        }
    }
}

Results with different UUID:

{
  "data": {
    "adventurePaginated": {
      "edges": [
        {
          "cursor": "Uml2ZXJzaWRlIENhbXBpbmcgQXVzdHJhbGlhCjM5Njc4Yzk1LWQ1ZTAtNDE2Mi1hYjQ5LTUxYjM4YjVlODM4OQ==",
          "node": {
            "title": "Riverside Camping Australia"
          }
        },
        {
          "cursor": "U2tpIFRvdXJpbmcgTW9udCBCbGFuYwo4M2I2MzgwMi1mZmIwLTQ3ZDYtOTRiMC1lZTgyMWU4ODc1Mzg=",
          "node": {
            "title": "Ski Touring Mont Blanc"
          }
        },
        {
          "cursor": "U3VyZiBDYW1wIGluIENvc3RhIFJpY2EKODg1MmMyMmEtZTAzMy00MTNjLThiMzMtZGQyMzY5ZTNjN2M1",
          "node": {
            "title": "Surf Camp in Costa Rica"
          }
        }
      ],
      "pageInfo": {
        "endCursor": "U3VyZiBDYW1wIGluIENvc3RhIFJpY2EKODg1MmMyMmEtZTAzMy00MTNjLThiMzMtZGQyMzY5ZTNjN2M1",
        "hasNextPage": true
      }
    }
  }
}

[danieljkahn]

I am still experiencing issues with this. The error appears to be inconsistent across different models. With my pagePaginated query, I first run with the following variables:

{
  "locale": "en",
  "sort": "title ASC",
  "first": 2,
  "path": "/path/to/my/content/",
  "after": ""
}

 Which correctly returns two items, along with the pageInfo which looks like:

"pageInfo": {
"hasPreviousPage": false,
"hasNextPage": true,
"startCursor": "bnVsbAo4ODU5YzM4OC0zOWFlLTQ5OTctYmQzNi03ZWVmMGJmZTU4YWI=",
"endCursor": "bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI="
}

Next, I take the endCursor and pass this in so my next query uses the following variables:

{
  "locale": "en",
  "sort": "title ASC",
  "first": 2,
  "path": "/path/to/my/content/",
  "after": "bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI="
}

This should give me the next two items after the specified cursor, but it is instead returning the following:

{
  "errors": [
    {
      "message": "Exception while fetching data (/pagePaginated) : Start cursor not found in supplied data:bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI=",
      "locations": [
        {
          "line": 12,
          "column": 3
        }
      ],
      "path": [
        "pagePaginated"
      ],
      "extensions": {
        "classification": "DataFetchingException"
      }
    }
  ],
  "data": null
}

Strangely, I have another identical persisted query (but for a different model), where this exact same process does not yield the error.

Why would this be happening for only one model?

[aanchal-sikka · Accepted solution]

Hello @danieljkahn 

Since, it inconsistent, I might not be able to reproduce the issue.

I would suggest you to raise an Adobe ticket, so that they can access the content, CFM and graphql in a more intricate way.

[krati_garg]

@danieljkahn 

I believe sorting before pagination is messing up the outcome. Cursor value largely depends on the List Items, and when the list is sorted or Filtered, it is possible that cursor may or may not be found in that selected list. 

This could probably be the reason, why it is not throwing error in other CFMs. Check out this documentation to explore further: https://www.apollographql.com/docs/react/pagination/cursor-based/

For the above query, please try changing the sequence of your query parameters to this:

{
"locale": "en",
"first": 2,
"path": "/path/to/my/content/",
"after": "bnVsbAo5YTM3ZWVlMi1hM2ZjLTQ4N2QtYmY4Yi1kZTMzMzg5YTAwNWI=",
"sort": "title ASC"
}

[kautuk_sahni]

@danieljkahn Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.