How to create PSEO content?
-
Bryan Robinson
- 2023-12-28
This is fine when you have a small number of posts, but if you want 100 posts on the homepage, the build time and load time are going to get longer and longer. Not great for developer experience or user experience. While using a posts() query is great for getting started, we’ll want to switch to a method more suited for larger projects.
For each model you create, Hygraph creates a standard query and a connections query for it. This specialized connection query gives us all the information we need to properly paginate and request content at various points in the model’s content. Hygraph follows the Relay cursor connection specification and does all the API work for you to make sure it’s ready for use in the postsConnections query.
This new query let’s us query pages of data instead of the data itself. While it adds a bit of overhead, it makes up for that with all the data we need to properly work:
- Posts are edges in our query
- Each post has a unique cursor point and all the original post data
- Each query will also return a unique
pageInfoobject which gives us a start and end cursor, booleans for next and previous pages, and the total page size - The start and end cursors can be used to get the next or previous set of posts
Let’s restructure the homepage query to get a page of content instead of just a number of posts. To do this, we need to change from using the posts() query to postsConnections() and restructure the returned data. We still use the pageSize variable to define how many items each page should hold and then pass that data as pages instead of posts to the Astro template to loop over.