Load more or set number of displayed post in custom post type

Hi! I want to create a loop with my custom post type posts. All working fine, i fetch my posts beforeSSR and i’m able to use that on homepage.
Unfortunately there’s only 10 posts display in my loop and the others post are in the next page. I want to display all post in one page. Some suggestions? :slight_smile:
Thtat’s my code in index.js

...
actions: {
   
    theme: {
   
      beforeSSR: async ({ state, actions }) => {
        await actions.source.fetch("/portfolio");
      },

    },
  },
...

And in homepage.js

import React from 'react';
import {connect} from 'frontity';

const HomeTemplate = ({state, libraries}) => {
    const data = state.source.get(state.router.link)
    const portfolioEl = state.source.get(`/portfolio/`).items;
    const Html2React = libraries.html2react.Component
    return(
        portfolioEl.map((singlePort) => {
            const portfolioPost = state.source[singlePort.type][singlePort.id];
            console.log(portfolioPost);
            return(

                <div key={singlePort.id}>
                    <Html2React html={portfolioPost.title.rendered} />
                </div>
            )
            
        })
    )

}

export default connect(HomeTemplate);

Hey @matteo.lcd,

you can only see 10 posts because that is the default amount returned by wordpress as part of an API request. There are few ways you can adjust this. For example, you can pass per_page as a param to the request or you can adjust in the frontity settings, how many items are being requested for your CPT.

I hope that helps.

1 Like

Hi @ni.bonev, thankyou very much! I resolve with an handlers:

export const portfolioHand = {
    pattern: "/portfolio",
    func: async ({ route, params, state, libraries }) => {
      const response = await libraries.source.api.get({
        endpoint: "/wp/v2/jetpack-portfolio",
        params: {
            per_page: 100,
            _embed: true
          }
      });
  

      const items = await libraries.source.populate({ response, state });

      Object.assign(state.source.data[route], {
        isPortfolioType: true,
        items: items.items,
        items
      });
      
    }
  };

work fine, but it’s not possible to set over 100 posts per page. I’m looking for use a load more in the future. :slight_smile:

1 Like

hey @matteo.lcd ,

I am glad you found a way. This does see the right way to handle it.
As for the 100 entries, you are correct, this is the limit. If you havent, you might want to take a look at this: Pagination | REST API Handbook | WordPress Developer Resources

Good luck and Happy Coding.

3 Likes