Open phaniophrero opened 2 years ago
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)
}
@arthurzeras Ok , thank you for your quick response , and for the code example I apreciate it.
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 ?
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 !
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.