Why Frontity doesn't get the title and description from WP API?

As a WordPress user, I would prefer to manage all my content in WP panel and use Frontity just for the frontend. It would be great to be able to synchronize the title and description you write in WordPress with Frontity, so I (or my clients) don’t have to go into Frontity project to change this info and be able to do this in WP dashboard.

I have seen that this information is in the API, so wouldn’t it be better to take this information from there?

https___test_frontity_io_wp-json_

Is this not possible because it wouldn’t adapt to other potential sources? Or it is just not included this way in mars theme?

Thanks in advance!

3 Likes

I had see same, but it’s be wrong if troubling with it.

Have many other points what very want see from wp api.

Can continue and showing it? Its not be understandins as wrong sounds :wink:

Technically it could be supported but considering benefits vs costs I don’t think it’s a good idea.

  • How many times are you going to edit those fields?
  • Is it worth to do an additional fetch on each SSR just for those two fields?

Please note that a big site can easily do thousands of SSR each day.

1 Like

Good day.
I partly agree with you that it is very expensive and not advisable to constantly receive this data (with the loading of each page).

But let’s continue this topic and I will try to argue the importance of this issue.

This title changes: once when you create a website and every time a new optimizer comes to the project, and after a hectic night, it comes to mind to change the slogan using a new keyword seo request. :wink:

@luisherranz
My English is not very good, so I will try to give some examples and you will understand my point:

Name of the site
administrator email
number of posts per page

and other basic wp settings that will sooner or later be needed on the frontity side.

How you think about it?

For example in other theme on community discussed title and desc and see as lang static set


This data can read from general setting wp, because not only en lang used users.

I’m sorry I told this was not a good idea. My fault. Let’s me recap and say instead: “it’s not usually a good idea”.

But in Frontity people should be able to do pretty much what they want. So if you want to do it because in your case it is a good idea, then yes, this can be done.

You just need to add a handler to access that information.

In this example I am adding a handler for the /wp-json/ endpoint and I am calling it "nameAndDescription" internally to be able to use it in Frontity.

Once the handler is added, you can use the same actions.source.fetch and state.source.get APIs to fetch and use its content.

I have added it only to the server using beforeSSR and the fetching is done also only in the server. The initial state is sent to the client, so you don’t need to refetch it again in the client. It will be already there.

import Theme from "./components";
import image from "@frontity/html2react/processors/image";

const beforeSSR = async ({ libraries, actions }) => {
  // Add image processor.
  libraries.html2react.processors.push(image);

  // Add the nameAndDescription handler.
  libraries.source.handlers.push({
    name: "nameAndDescription",
    priority: 10,
    pattern: "nameAndDescription",
    func: async ({ route, state, libraries }) => {
      // 1. Get response from api endpoint.
      const response = await libraries.source.api.get({
        endpoint: "/" // "/" is added after "/wp-json" so final url is "/wp-json/"
      });

      // 2. Extract relevant data from the response.
      const { name, description } = await response.json();

      // 3. Add it to the source.data object.
      state.source.data[route].name = name;
      state.source.data[route].description = description;
    }
  });

  // Fetch the wp-json endpoint.
  await actions.source.fetch("nameAndDescription");
};

const beforeCSR = ({ libraries }) => {
  // Add image processor.
  libraries.html2react.processors.push(image);
};

const marsTheme = {
  name: "@frontity/mars-theme",
  roots: {
    theme: Theme
  },
  state: {
    theme: {
      menu: [],
      featured: {
        showOnList: false,
        showOnPost: false
      }
    }
  },
  actions: {
    theme: {
      beforeSSR: beforeSSR,
      beforeCSR: beforeCSR
    }
  }
};

export default marsTheme;

If you inspect frontity.state.source.data in the client you should see that it is already there:

You can now access it using state.source.get("nameAndDescription"). Like this:

const Header = ({ state }) => {
  const { name, description } = state.source.get("nameAndDescription");
  return (
    <>
      <Container>
        <StyledLink link="/">
          <Title>{name}</Title>
        </StyledLink>
        <Description>{description}</Description>
      </Container>
      <Nav />
    </>
  );
};

And it should work :slight_smile:

03

10

3 Likes