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

🙋Get Help
1

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);
2

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
3

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:

2 Likes
4

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
5

Hi,

Sorry for bumping an old thread, I’m looking at this because I’m also trying to get more than 10 posts at a time. I just want to know where you are writing this code; is this in Homepage.js and then you’re calling .map() over portfolioHand? I’m new to Frontity and I’m still confused on where, when, and how I can update/modify the request.

6

Hi @jdkolassa, you need to create an handler, in my case “portfolioHand”, you fetch more than 10 posts by the handler query, and after in your loop page call the handler function to fetch items (named “portfolioEl” in my case you see in homepage.js).
In handler function specify the path where you want to execute your fetch (/portfolio/ in my case).
You need to import your handler in the index.js config file into sources.

Unfortunately i can reply by smartphone now and i’m not able to copy and paste some code…
I hope it’s helpfull :slight_smile:

7

Ah, so “portfolioEl” in your new code = “portfolioHand.items”?

That makes sense, thank you!

8

@jdkolassa yes, you map posts from
const portfolioEl = state.source.get(/portfolio/).items

:slight_smile:

1 Like