How does this work on frontend ?

[phaniophrero]

Hi, could you please tell me how is this pagination working on frontend ?
I mean do we have to do the functionality on the frontend ? based on the data I send from django with all the filtering , like limit and offset ?

Thank you.

[arthurzeras]

Hello @phaniophrero

Yes, you must send both limit and offset in graphql query to paginate the list. This is a example of the query:

query GET_USERS(
  $username_Name: String
  $username_Icontains: String
  $limit: Int
  $offset: Int
) {
  allUsers (
    username_Name: $username_Name
    username_Icontains: $username_Icontains
    limit: $limit
    offset: $offset
  ) {
    totalCount
    results {
      id
      name
      username
      status
      avatar
    }
  }
}

And below there's a pseudo code demonstrating the use:

async function getUsers(offset = 0, limit = 10) {
  const response = await apollo.query({
    query: GET_USERS,
    variables: {
      username_Name: "john",
      username_Icontains: "john",
      limit,
      offset,
    }
  })

  this.tableData = response.data.allUsers.results
};

/**
* Example when user click in a number of the pagination element
*/
function onUpdatePagination(page = 1) {
  this.getUsers((page - 1) * limit)
}

[phaniophrero]

@arthurzeras Ok , thank you for your quick response , and for the code example I apreciate it.

[phaniophrero]

Hello @phaniophrero

Yes, you must send both limit and offset in graphql query to paginate the list. This is a example of the query:

query GET_USERS(
  $username_Name: String
  $username_Icontains: String
  $limit: Int
  $offset: Int
) {
  allUsers (
    username_Name: $username_Name
    username_Icontains: $username_Icontains
    limit: $limit
    offset: $offset
  ) {
    totalCount
    results {
      id
      name
      username
      status
      avatar
    }
  }
}

And below there's a pseudo code demonstrating the use:

async function getUsers(offset = 0, limit = 10) {
  const response = await apollo.query({
    query: GET_USERS,
    variables: {
      username_Name: "john",
      username_Icontains: "john",
      limit,
      offset,
    }
  })

  this.tableData = response.data.allUsers.results
};

/**
* Example when user click in a number of the pagination element
*/
function onUpdatePagination(page = 1) {
  this.getUsers((page - 1) * limit)
}

Could you please show an example with this based on the new @apollo/client ? with the new useQuery function ?

[phaniophrero]

Also do you know how can I fix the "reset to first page when refreshing the page " ? so now I've implemented the back and next buttons functionality , and it works to navigate through the pages , but if I hit refresh on the page and I'm currently on the 3rd page , after refreshing the page in the browser the page of the table goes back to page 1 , how can I persist the page even after refresh ? Please let me know if you have any idea about this , thank you !