How Does Pagination works?

aeyzazkhan · 24 September 2019 19:37

Hello, I am trying to paginate Blog posts, is there any documentation or instructions to query posts or set posts per page?

luisherranz · 25 September 2019 09:37

You can use libraries.source.parse to get an object with { page, path, query} from a link (like state.router.link) and libraries.source.stringify to generate a link back.

source should return totalPages of a fetched page with state.source.get.

// Get the page of the current URL:
const { path, page, query } = libraries.source.parse(state.router.link);
// Get the URL of the next page:
libraries.source.stringify({ path, page: page + 1, query });
// Get the total number of pages:
const { totalPages } = state.source.get(state.router.link);

There is a easy example in mars-theme:

github.com

frontity/frontity/blob/dev/packages/mars-theme/src/components/list/pagination.js

import React, { useEffect } from "react";
import { connect, styled } from "frontity";
import Link from "../link";

const Pagination = ({ state, actions, libraries }) => {
  const { totalPages } = state.source.get(state.router.link);
  const { path, page, query } = libraries.source.parse(state.router.link);

  const isThereNextPage = page < totalPages;
  const isTherePreviousPage = page > 1;

  const nextPageLink = libraries.source.stringify({
    path,
    page: page + 1,
    query
  });

  const prevPageLink = libraries.source.stringify({
    path,
    page: page - 1,

This file has been truncated. show original

And a more complex example in twenty-nineteen:

github.com

imranhsayed/frontity-twentynineteen/blob/master/packages/twentynineteen-theme/src/components/list/pagination.js

import React, { useEffect } from "react";
import { connect, styled } from "frontity";
import Link from "../link";
import PreviousIcon from "../icons/previous-icon";
import NextIcon from "../icons/next-icon";

const Pagination = ( { state, actions, libraries } ) => {

	const { totalPages }        = state.source.get( state.router.link );
	const { path, page, query } = libraries.source.parse( state.router.link );

	const isThereNextPage     = page < totalPages;
	const isTherePreviousPage = page > 1;

	/**
	 * Get the required page link.
	 *
	 * @param {int} pageNo Page No.
	 * @return {string} Post permalink.
	 */

This file has been truncated. show original

aeyzazkhan · 26 September 2019 08:28

The problem i am having is posts per page limited to 10, is there any way i can change that from backend? i tried to change the values in wordpress settings but it somehow applied to my Custom Post.

SantosGuillamot · 26 September 2019 09:21

You can add params to @frontity/wp-source package at frontity.settings.js and select there the number of posts per page.

...
{
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://test.frontity.io/wp-json",
          "params": {
            "per_page": 20
          }
        }
      }
},
...

There is a more detailed explanation at @frontity/wp-source docs.

Is this what you were looking for?

luisherranz · 26 September 2019 16:41

By the way, the params setting was introduced in wp-source v1.3.1 so make sure to update it to the last version: Frontity update: 10 September 2019

aeyzazkhan · 26 September 2019 17:18

Thanks @SantosGuillamot but why its effecting my Custom Post Data, i believe it has nothing to do with this.

luisherranz · 27 September 2019 07:24

What do you mean by Custom Post Data?