Using libraries in Frontity to fetch data from WP REST API

🙋Get Help
#1

Hi everyone!
I’m struggling in understanding Frontity libraries. In my case, I want to fetch data about posts from my WP REST API. The default value of per_page is 10 and I want to increase it to 100. So, I use “libraries.source.api.get()” with {endpoint: posts, params: {per_page: 100}}

I read API reference about wp-source libraries and watch videos about wp-source but I don’t understand some points:

  1. Where should I put “libraries.source.api.get()” . In useEffect, or in index.js file?
  2. The doc says: “it doesn’t return data but a promise that is resolved when the action is finished (and state is updated)”. How can I see that update, and how to access to the updated state?

I am trying to imagine how Frontity works, so I’m sorry if these questions is too basic.
Thank you guys so much!

#2

I see the problem is you want to increase per_page, so you can do it like this at frontity.settings.js.

{
      name: "@frontity/wp-source",
      state: {
        source: {
          URL: "whatever your WordPress source",
          params: {
            per_page: 9, //edit your per_page here
          },

Also, I think libraries.source.api.get is only used when you want to create a custom handler…

1 Like
#3

Here is how I do it. This is an example for fetching a custom post type called “Components” via an action.

fetchAllComponents: async ({ state, libraries }) => {
  const response = await libraries.source.api.get({
    endpoint: "components",
    params: {
      per_page: 99,
    },
  });

  const components: DataEntity[] = await libraries.source.populate({
    response,
    state,
  });
},

The suggestion of Miracutor also works, but then that will be applied to every single post_type and I believe you don’t want that in probably 90% of the cases.
Oooh yeah and keep in mind per_page: 100 wont work. WP has a limit of 99 per page.

Good luck. Let me know if you have more questions about it.

1 Like