HomePage endpoint

🙋Get Help
1

Como están?
Quisiera implementar este endPoint para tener disponible los posts iniciales en la página de inicio, y no se como hacerlo

https://www.carasycaretas.com.uy/wp-json/wp/v2/home

2

Hi @vscopise!

If you want to show the latest posts on the homepage, you don’t need to create a new endpoint. At Frontity, the latest posts are shown by default, fetching the endpoint https://www.carasycaretas.com.uy/wp-json/wp/v2/posts.

Maybe I didn’t understand you properly. If you are not trying to show the latest posts, please give us more information and we will be glad to guide you.

By the way, we usually try to reply in English in the forum, but you can translate the content following this guide.

3

Hi Santos, I do not want to show the latest Posts, only certain posts, determined by some categories, tags, etc.
My endpoint works, returning the necessary posts:
https://www.carasycaretas.com.uy/wp-json/wp/v2/home

I need to read it, add the posts to the state and show them on the home page

Thanks !

4

Okay, I understand now!

I think the best solution would be to create a handler for that endpoint and load that data creating a new component for the home.

First, you’ll need to create the handler at the index.js file of your theme. It should be something like this:

const homeHandler = {
  name: "home",
  priority: 10,
  pattern: "/",
  func: async ({ route, state, libraries }) => {
    const { api } = libraries.source;
    // 1. fetch the specified page
    const response = await api.get({
      endpoint: "home"
    });

    // 2. Transform to json
    const homeData = await response.json();

    // 3. add data to source
    Object.assign(state.source.data[route], {
      homeData,
      isArchive: true,
      isPostTypeArchive: true,
      isHome: true
    });
  }
};

const marsTheme = {
  name: "@frontity/mars-theme",
  roots: { ... },
  state: { ... },
  actions: { ... },
  libraries: {
    ...
    source: {
      handlers: [homeHandler]
    }
  }
};

export default marsTheme;

This way, you’ll have all the data of that endpoint in the state once you navigate to the homepage, you just have to show however you want. For example, you could create a component for the home and import it in your index.js at components folder:

import React from "react";
...
import Home from "./home";

const Theme = ({ state }) => {
  ...
  return (
    <>
      ...
      <Main>
        {(data.isFetching && <Loading />) ||
          (data.isHome && <Home />) ||
          (data.isArchive && <List />) ||
          (data.isPostType && <Post />) ||
          (data.is404 && <Page404 />)}
      </Main>
    </>
  );
};

export default connect(Theme);

And your component could look something like this:

import React from "react";
import { connect, styled } from "frontity";
import Item from "./list/list-item";

const Home = ({ state }) => {
  // Get the data of the home.
  const data = state.source.get(state.router.link);

  return (
    <Container>
      <div>Content before posts</div>

      {data.homeData.posts.map(item => {
        // Render one Item component for each one.
        return <Item key={item.id} item={item} />;
      })}

      <div>Content after posts</div>
    </Container>
  );
};

export default connect(Home);

Adapting this to your needs, I think it’d solve your problem. Let us know if it works and feel free to share any more questions about it :blush:

5

Santos, thank you very much!

Now in my state I have all the home endpoint data (post ids and post data).

Although I include the featured image in my endpoint, I would like to know how to do so that each image can be loaded using the default Wordpress API (I have the id of each post)
Cheers

6

I’m glad it worked :slightly_smiling_face:

Do you mean what is the endpoint for retrieving images from WordPress? In that case, the endpoint it is https://www.carasycaretas.com.uy/wp-json/wp/v2/media. If you want to filter by post you’ll have to add the query ?post=postId. For example: https://www.carasycaretas.com.uy/wp-json/wp/v2/media?post=71141.

If necessary, you could also filter by slug or other fields too.

7

Hi Santos

What I would like to know is how to automatically populate state.source.attachment with the different images (i have the post’s ids)

Thks

8

Hi Santos

I realize that the different posts should be in state.source.post, that way the featured images are available in state.source.attachment.

Now I have the relevant information for the homepage in:

Thks

state.source.data ['/']. HomeData.data,

Is there a way that the content of the posts and their featured images remain in the corresponding place?

9

In order to make populating the state easier we’ll need to improve our populate function. Right now it just accepts a Response as a parameter, and we’d have to include the option to pass a json too. We’ve already added that to our Roadmap.

In the meantime, if you need to have the posts at state.source.post, you can modify your handler to adapt the functionality of populate to your case (we are using Normalizr library, you can check the whole code at GitHub). And you’d have to pass homeData.posts as argument. If you want to do it we can guide you if you have any questions.

Btw, it would be also good to add the _embedded content of the posts (authors, featuredImage…) as it is done at http://carasycaretas.com.uy/wp-json/wp/v2/posts&_embed=true. This way, you can get more info in the same fetch.

Hope it helps, let us know if you have any more questions.