Pagination

Properties

Specifying what data to paginate

  • data - This property defines a query which TakeShape will use to generate pages with. The one restriction for this query is that it must return a paginated list. Most of the time you will use a list query get<type>List.
  • property - This property allows you to specify an array property in the context to paginate over.
  • itemName - The name of the current item in your template context. For example if you are paginating over list of blog posts you can specify itemName: post and in the template the data for each post is available under the post property. Note this property is optional the default name is item.

Note: data will override property so it is best practice to only specify one or the other

Listing pages

  • template - A path to a template file defining a listing page.
  • path - The path to the listing page.
  • pageSize - The number of items to show on each page.

Note: All three of these properties are required in order for TakeShape to generate listing pages.

Examples

Paginating over context:

  blog:
    path: /blog/:title
    template: pages/blog/post.html
    context: data/posts.graphql
    paginate:
      pageSize: 12
      path: /blog/page-:num
      firstPage: /blog
      template: pages/stories/landing.html
      property: blog
      itemName: post

Paginating a query:

  blog:
    path: /blog/:title
    template: pages/blog/post.html
    paginate:
      pageSize: 12
      path: /blog/page-:num
      firstPage: /blog
      template: pages/stories/landing.html
      data: data/posts.graphql
      itemName: post

Query

query {
  getBlogPostList {
    total
    items {
      _contentTypeName
      title
      contentHtml
      authorName
    }    
  }
}

Join us

Interested in joining the team as coworker or investor?

contact@takeshape.com