Webstudio
Log in

Join the Webstudio community

Updated 7 months ago

Pagination with Wordpress/Graphql

At a glance

The community member is trying to set up pagination for their WordPress/GraphQL posts page. Another community member has updated the WordPress template to include pagination and provided documentation on the methodology. However, the original community member is still having trouble implementing the "previous" button in addition to the "first" button. After several back-and-forth comments, the community members eventually arrive at a solution that involves using null values and a specific condition for the GraphQL query parameters.

Useful resources
bbonsak
·
Hi. I'm trying to figure out how to do pagination with wordpress/graphql. Not very successful so far 🙂 It would be great if the Wordpress template "posts" page could be set up with pagination.
J
b
24 comments
JJohn Siciliano
Hey yeah I need to add this. Will work on it and get back to you
JJohn Siciliano
@bonsak I've updated the WordPress template to include pagination.

I've also updated the documentation to explain the methodology and assist in converting your current query to enable pagination https://docs.webstudio.is/university/integrations/wordpress#pagination

Let me know if you have any questions
bbonsak
Great! Thanks!
bbonsak
Hi. I was soo close 🙂 I'm trying to figure out how to do a "previous" button in addition to your "first" button. So in my "previous" button i try to use this expression:
?last=${Posts Per Page}?before=${Wordpress Data.data.data.posts.pageInfo.startCursor}
But it goes back to the first 5 records. No matter what "page" i have navigated to. Not completly sure if this is the right expression. From Googeling it seems that this behaviour occurs when the url parameters are wrong.
https://apps.webstudio.is/builder/e87b8253-a9d9-4d94-912e-88359f1f3bc6?authToken=b0a32a28-bca7-4813-89ff-c8fdc1ed4836&mode=preview
JJohn Siciliano
you need to bind the query params to the actual query
Attachment
image.png
JJohn Siciliano
right now t only has first and after in the graph ql varibles so you need to add last and before
bbonsak
Hm. Thought i had done that already. Anyway. When i set it up like you did, "Previous" is still going back to the first 5 posts.
Attachment
image.png
JJohn Siciliano
Oh i think its defaulting to first instead of last as both are present it chooses the first one
JJohn Siciliano
actually last should be set to posts per page
JJohn Siciliano
start with that, if setting last to posts per page doesnt work then we need a condition to only show first if after is present
bbonsak
That gives this error:
Plain Text
{
  "data": {
    "errors": [
      {
        "message": "The `first` and `last` connection args cannot be used together

So i'm trying to set condition for first and last but it sets hasNextPage to false. And hasPreviousPage to treu 🙂
Attachment
image.png
JJohn Siciliano
good work but i dont think null will work. I'd just try empty quotes like '' and see what happens
bbonsak
That doesn't work.
"message": "Variable "$first" got invalid value (empty string); Expected type Int;
I'm using null in the graphql ide inside wordpress and that works.
Plain Text
{
  "first": null,
  "after": "",
  "last": 5,
  "before": "YXJyYXljb25uZWN0aW9uOjQyMg==",
  "search": ""
}

This gives the previous 5 posts.
JJohn Siciliano
ah try setting them to 0 then instead of empty quotes
JJohn Siciliano
lets see how it responds to that
JJohn Siciliano
if it doesnt work i have another idea
bbonsak
Same with 0. There is somthing with the order of execution here. I get the same hasPreviousPage: true
JJohn Siciliano
okay ill hop into the builder and get you an answer for real this time 😅
JJohn Siciliano
So you were right to use null problem was the condition for first. Should look like this
(paste this in it should translate the vars back to human names)
Plain Text
{
  search: $ws$dataSource$5diGyVH6l4CKzrHu_kfIJ.search.search,
  first: ($ws$dataSource$5diGyVH6l4CKzrHu_kfIJ.search.after || !$ws$dataSource$5diGyVH6l4CKzrHu_kfIJ.search.before) ? $ws$dataSource$DmnuIP4R2MJKAjBqN0azx : null,
  after: $ws$dataSource$5diGyVH6l4CKzrHu_kfIJ.search.after,
  last: $ws$dataSource$5diGyVH6l4CKzrHu_kfIJ.search.before ? $ws$dataSource$DmnuIP4R2MJKAjBqN0azx : null,
  before: $ws$dataSource$5diGyVH6l4CKzrHu_kfIJ.search.before
}
JJohn Siciliano
Attachment
image.png
bbonsak
Sweet. Will check it out later tonight.
JJohn Siciliano
Cool if you can confirm if that works that would be great. Im thinking I'll add it to the marketplace but disable previous so it's in users control if they want to use it.
bbonsak
Works great! Thanks alot.
JJohn Siciliano
Sweet thanks
Add a reply
Sign up and join the conversation on Discord