Post per page after filtering

[alexaspalato]

Hello,
I’m on a project where the client wants a certain category on the home page
so I did that

const homeItems = data.items.filter((item) =>
  state.source.post[item.id].categories.includes(1780)
);
const items = data.isHome ? homeItems : data.items;

and then map these items in the archive. The problem is that it shows 2 pages, while I have put the posts per page to 100 (My client doesn’t want pagination)

This is the site https://javierlorrente.alexadark.vercel.app/
and this is the repo: https://github.com/alexadark/javierlorrente

[mburridge]

Hi @alexaspalato

You’re including a <Pagination /> component at the bottom of the <Archive /> component.

What figure do you have in Settings->Reading->Blog pages show at most in the WP admin?

[alexaspalato]

Yes I know that, and the post per page is 50
but I understand why it is doing that
this is how I get the archive items

const homeItems = data.items.filter((item) =>
  state.source.post[item.id].categories.includes(1780)
);

the problem is that is filtering by page, so the items for the home page are spread among 3 pages of items
How can I have the data for all items, not paginated and then make my filter, to get the items of only the category he wants to display on home

[mmczaplinski]

Hi @alexaspalato !!

There’s not really a way to “disable” pagination. The WP REST API will return a maximum of 100 posts in one request. So this means that we can show “all” posts as long as “all” is some integer smaller than 100 If we need more than 100 posts on one page, then we have to do another request from the client, but that’s probably not what we want.

However, you can solve your problem with a custom handler the following way (code modified from your repo):

// src/index.js

init: ({ libraries }) => {
        libraries.source.handlers.push({
          name: "custom_category",
          priority: 10,
          pattern: "/",
          func: async ({ link, params, state, libraries, force }) => {
           
            // 1. get all posts for the category
            const response = await libraries.source.api.get({
              endpoint: "posts",
              params: { categories: 1780 },
            });

            // 2. add items to state
            const items = await libraries.source.populate({
              response,
              state,
              force,
            });

            const { type, id } = state.source.get("/");

            // 3. add link to data. 
            // Might need to add more details to the state 
            // (look at the examples of other 
            // handlers in the frontity repo)
            Object.assign(state.source.data[link], {
              id,
              type,
              isHome: true,
              isArchive: true,
              items,
            });
          },
        });
      },

Then, in the Archive component just do:

// Archive.js

const Archive = ({ state, actions, showMedia }) => {
  const data = getUrlData(state);
  const author = state.source.author[data.id];

  const items = data.items;

  return (
    <>
     ... same as it was, just comment out the pagination component

       {/* <Pagination /> */}

    </>
    )
 }

By the way, we are slowly working on a version 2.0 of wp-source which will allow you to solve such problems just by adding some configuration to the frontity state! Stay tuned!

[alexaspalato]

Thank you!
when will the 2.0 be out ?
will it also include graphql (Luis told me that)
My client will not launch before the package comment is out, so perhaps it would be better to wait version 2.0 to finish this

[luisherranz]

Does the client want 100 posts per page or doesn’t want pagination links? If it’s the second case, please check out the new infinite scroll hook: Infinite Scroll hooks

I wouldn’t recommend fetching 100 posts for a single page just to filter them out and use a few. It will make the data attached to that page unnecessarily big. It’s best to create a handler (as @mmczaplinski showed) and fetch only the required posts.

@alexaspalato

when will the 2.0 be out ?

We cannot guarantee an ETA right now, but I hope we can have it before the end of the year.

@alexaspalato

will it also include graphql

The first version won’t have support for GraphQL, we’ll focus on the REST API first. But creating a GraphQL package should be fairly easy once the v2 is out.

@alexaspalato

My client will not launch before the package comment is out, so perhaps it would be better to wait version 2.0 to finish this

Do you mean wp-comments for native comment support? If so, @david is working on it right now

[mr.kristof.feher]

I have solved this problem through Wordpress. Just put this lin in the end of the function.php in the main folder of theme:

add_filter( 'rest_post_query', 'frontity_change_post_per_page', 10, 2 );

function frontity_change_post_per_page( $args, $request ) {
    $max = max( (int) $request->get_param( 'custom_per_page' ), 200 );
    $args['posts_per_page'] = $max;    
    return $args;
}