Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

How to find out I'm on the last page when querying Facebook Graph API? – Facebook api

As an exercise I’m writing simple (and also as stateless as possible) client-side application (in React) displaying posts in feed of single Facebook entity. The application gets its data from Facebook Graph API.

I use Facebook JS SDK to query the following URL: /<entity-id>/feed?limit=20&fields=...

I have simple paging buttons (“previous” & “next”), which are querying paging URLs received in API response in response.paging.previous and response.paging.next respectively.

The problem is I don’t know how to find out if I’m on the last page to disable the “next” button correctly.

There are couple of things I tried, however I still don’t get what I want.

Option 1: Allow clicking “next” until there are no more data in response

  • Button gets disabled when response.data.length == 0.

  • paging object contains next URL even when there are no more data to be received, so I can’t check it before getting to page with no data.

  • Problem is that when I get to that page, there is also no paging object included in response. As a result I can’t use the “previous” button to get back to the last page with data.

Option 2: Allow clicking “next” until I receive less data than query limit

  • Button gets disabled when response.data.length < limit.

  • Works well for collections where data.length % limit != 0.

  • Problem is in the opposite case, for example when there are 40 objects in the collection and I’m on the second page with limit 20, I can still click “next”, but then I end up on page with no more objects, as mentioned in Option 1.

Option 3: Remember URL of last request

  • Last request URL is stored into variable, and “previous” button works even in case when there are no paging data in response.

  • Solves only the “you can’t go back” problem.

  • Doesn’t solve the problem with correctly disabling the “next” button. It is still possible to click “next” on the last page with data and get to the empty page with no data.

So the question is:

How can I find out that I already received last items in collection and by clicking “next” I will get to invalid empty page?

  • It seems weird to me that Graph API provides the response.paging URLs even on the beginning/end of the collection.

  • For example if I have feed with 10 posts and I query with limit 20, I receive response with data: Array[10] and paging object with valid URLs in both paging.previous and paging.next, even though there are no “previous” and no “next” data.

  • Querying those URLs results in response with empty data array and with no paging object, so I there is no way to get back in stateless application.

  • Wouldn’t it be better if there were no paging.previous on the beginning of the collection and no paging.next on the end of collection?

Tags:

2

Answers


  1. 0

    By Graph API Cursor-based Pagination. https://developers.facebook.com/docs/graph-api/using-graph-api#cursors

    There is no matching way to do it as you want, out of the box.
    You should manage left records and your next button, separately of Graph API pagination.
    As a solution preload next page in addition to current.

    Also saving previous cursor is bad practice:
    “Don’t store cursors. Cursors can quickly become invalid if items are added or deleted.”

    Login or Signup to reply.
  2. 0

    For anyone seeing this – this is actually doable. I’m not sure if the Graph paging object previously had always returned a previous and next or if OP was making a mistake anywhere. However, I can confirm it will correctly return a previous/next when the data is able to go forward or backwards as you’d expect.

    The below sample is from the Graph API paging documentation and shows the result set that is the first page of the collection.

    "data": [
       *data returned*
],
"paging": {
  "cursors": {
    "before": "WTI5dGJXVnVkRjlqZAFhKemIzSTZANVGd3T1Rrek9UZAzROVGN3TlRNNE5Eb3hOVEV6TURnM09UTTIZD",
    "after": "WTI5dGJXVnVkRjlqZAFhKemIzSTZANVGd4TURBd09UazROVFk1T0RNM05Eb3hOVEV6TURreU5qQXoZD"
  },
  "next": "https://graph.intern.facebook.com/v2.11/1809938745705498/comments?access_token=valid_token_goes_here"
}

    Notice the absence of a ‘previous’ property in the object. Merely checking if next or previous was present was enough for me to proceed to disable/hide buttons.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search