Graphql cursor based pagination does not work with sorting | Community
Skip to main content
D
danieljkahn
November 2, 2023
Solved

Graphql cursor based pagination does not work with sorting

  • November 2, 2023
  • 3 replies
  • 1382 views

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.

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

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.

 

3 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
November 3, 2023

@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 } } } }
Aanchal Sikka
    D
    danieljkahnAuthor
    December 1, 2023

    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
      Community Advisor
      aanchal-sikkaCommunity AdvisorAccepted solution
      Community Advisor
      December 1, 2023

      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.

       

      Aanchal Sikka
        krati_garg
        Adobe Employee
        krati_gargAdobe Employee
        Adobe Employee
        December 1, 2023

        @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
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          December 4, 2023

          @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.

          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...