I can't get it to make work frontity using and endpoint for all of my register posts types

Hi!
I’m trying Frontity, looks good but I get stuck when I tried to publish my site with some of my register post…

My settings file looks like this:

{

      "name": "@frontity/wp-source",

      "state": {

        "source": {

          "api": "https://mysite.com/wp-json",

          postTypes: [

            {

              type: "fanzines_post", // type slug

              endpoint: "/wp/v2/fanzines_post"

            },

            {

              type: "comics_post", // type slug

              endpoint: "/wp/v2/comics_post"

            },

            {

              type: "posts", // type slug

              endpoint: "/wp/v2/posts"

            },

          ]

        },

        

      }

    },

Don’t know what I’m doing wrong…

I also have tried this:

{

      "name": "@frontity/wp-source",

       "state": {

          "source": {

            

            "api": "https://mysite.com/wp-json",

            params: {

              per_page: 5,

              type: ["comics_post"]

            }

          },

          

        }

      

    },

Hello @13millonesdenaves, welcome to Frontity :slight_smile:

Could you please share with us the URL of your site or a complete repo so we can try to reproduce your error?

Hi Pablo…I’m testing my site locally…so I can’t share my code.
Another thing that I have noticed is that on my packages folder I only have 2 folders one for the theme and another called build
I can’t edit the @frontity/wp-source package…

Here is my endpoint
https://13millonesdenaves.com/wp-json

And here is another one that I tried with the specifics posts
https://13millonesdenaves.com/wp-json/wp/v2/comics_post

And another screenshot, this is from my frontity.settings.js

Thanks for your reply!

Hi Pablo, did find out anything related with the question I posted?
thanks!

Hi @13millonesdenaves,

Your REST API is taking a lot of time to respond. It responds this a lot of times…

⬢  httpstat https://13millonesdenaves.com/wp-json/wp/v2/comics_post/
> curl -w <output-format> -D <tempfile> -o <tempfile> -s -S https://13millonesdenaves.com/wp-json/wp/v2/comics_post/
curl error: curl: (7) Failed to connect to 13millonesdenaves.com port 443: Operation timed out

We recommend you to install something like WP REST Cache to improve this response time of your WP REST API


This slow response time can cause a server error if you do that request on the server side. With Frontity you could define a beforeSSR method to do some logic before the server responds with the initial HTML of your React app

packages/twentytwenty-theme/src/index.js

...
const twentyTwentyTheme = {
  name: "@frontity/twentytwenty-theme",
  roots: { ... },
  state: { ... },
  actions: {
    theme: {
      ...,
      beforeSSR: async ({ actions }) => {
        await actions.source.fetch(`/comics_post/`)
      }
    },
  },
  libraries: {...}
};

export default twentyTwentyTheme;

This will load your React App in the browser when this request is finished and attached to your frontity.state.source

If you are deploying your app to Vercel servers using now this code will provoke (in the case of a slow REST API like yours) the server to spend more than 10s to respond cause which makes Vercel servers to cut the connection and trigger this Task timed out error

[GET] /
16:05:02:15
2020-05-06T14:05:12.622Z 1baedd5a-d939-4e3c-988d-2bb830bcb083 Task timed out after 10.01 seconds
[GET] /
15:25:32:18
2020-05-06T13:25:42.684Z ea7700cc-ce15-4778-954e-9b5aaa348a85 Task timed out after 10.01 seconds
[GET] /
12:46:48:69
2020-05-06T10:46:58.792Z eb486a51-4555-47c5-a0da-117c124f6cbf Task timed out after 10.01 seconds

By moving that logic to the client, the request is done from the client side so no more timed out errors from the server

packages/twentytwenty-theme/src/components/sub-header-comics.js

import React, {useState, useEffect} from "react";
import { connect, styled } from "frontity";
import Link from "./link";

const ComicsSubHeader = ({ state, actions }) => {
  const { comics_post } = state.source;
  const { headerBg } = state.theme.colors;
 
  useEffect(() => {
    async function fetchData() {
      await actions.source.fetch(`/comics_post/`)
    }
    fetchData();
  })
  
  const ComicsBar = ({comics}) => (<>
    <TitleGroup>
      <SiteTitle>
        <StyledLink link="/comics_post">Comics:</StyledLink>
      </SiteTitle>
    </TitleGroup>

    {
      comics && Object.keys(comics)
        .map(key => comics[key])
        .map(({title, link}, index) => {
          return (
            <Link key={index} link={link}>{title.rendered}</Link>
          )
        })
    }
   </>)

  return (
    <PageHeader bg={headerBg} id="site-header">
      <HeaderInner>
       { comics_post ? <ComicsBar comics={comics_post}/> : <p>Loading comics...</p>}
      </HeaderInner>
    </PageHeader>
  );
};

export default connect(ComicsSubHeader);

...

Hope this helps

What are you building with Frontity? :blush:

Wow!
Looks great, I’m gonna try this ASAP,
I got one question…looking at the repo, I see you’ve have this on on the frontity.settings.js

 postTypes: [
        {
          type: "comics_post", // type slug
          endpoint: "comics_post", // REST API endpoint
          archive: "comics_post" // link where this custom posts are listed
        }
      ]

I don’t understand why If you have specified that the endpoint has to load the comics_post type the home page is still showing “normal” wordpress posts and not the comics posts
do I have to exclude the “posts” type on the API call.
I saw your solution working on the ComicsSubheader, but I get confused with the rest of the page.

Thanks

Hi @13millonesdenaves,

This configuration belongs to the package @frontity/wp-source

That specific property postTypes allows you to add to frontity.source the info regarding your custom post types comics_post when it’s available for the page your requesting


There’s a few things to consider about how Frontity manages the source data (the data from the REST API):

  • this logic (how to get the data from the REST API) is handled by the @frontity/wp-source (you could develop your own package to handle this logic in a different way) in the default themes
  • This package gets only the data needed for the current URL (most of the cases it will load first the data associated to the homepage /)
  • The data got from @frontity/wp-source is added to state.source;
  • Every time you change a URL (without reloading your browser) the React code (and internally the @frontity/wp-source package ) will take care of doing the proper requests and adding that info to state.source;

So, in your WP installation, your homepage is just displaying your latest posts. That’s why we need to do an additional request to actions.source.fetch(/comics_post/) to get the data from your custom posts.

You can check the content of frontity.source before and after the actions.source.fetch(/comics_post/). You’ll see how only after the request you have the comic_book data in state.source;

What do you plan to build with Frontity?

Thanks, very well explained. I’m gonna try

I want to move my wordpress site to Frontity I hope it will be easy :crossed_fingers:

3 Likes

Great!

Share your project with the community in the Showcases section once you have it :blush:
This will be useful for the rest of the community to check the type of projects that can be done with Frontity

Looking forward to seeing yours! :muscle:

1 Like