OK, I thought this was simple, but apparently I can’t manage it myself and after looking in the documentation and forums for a while I still can’t figure it out, so I’m asking for help. I’m probably totally missing one step in the process.
What I want is to create a Team component that loops through all posts of the custom post type called ‘team’, but currently I can’t manage to populate Frontity with the posts of that CPT.
The enpoint for the CPT is:
https://frontity.noesteprojecten.nl/wp-json/wp/v2/team
So far I’ve added the CPT to frontity.settings.js
:
...
postTypes: [
...
{
type: "team",
endpoint: "team",
archive: "/team-archive",
},
]
...
Added the CPT to my beforeSSR (is this even right for this purpose?):
beforeSSR: async ({ state, actions }) => {
await Promise.all(
[
actions.source.fetch("/team"),
]
);
},
And then started working on a component Team
:
import React, {useEffect} from "react";
import { connect, styled } from "frontity";
const Team = ({ state, actions, libraries }) => {
useEffect(() => {
// No need to use `async/await` here
actions.source.fetch('/team')
}, []);
// The data will not exist at first, `dataPost.isReady` will be false.
// But then, it will rerender when `actions.source.fetch` is finished.
const dataPost = state.source.get("/team");
// This will work just fine.
dataPost.isReady ? console.log(dataPost, state.source.team) : console.log('nope...');
return null;
}
export default connect(Team);
However, dataPost returns an error: post type from endpoints \"posts,pages,media\" with slug \"team\" not found
. But when I visit the archive page for team, the post type does exists: https://frontity-test-ten.now.sh/team-archive
After visiting the CPT archive page, the posts are available for the Team component. But of course I need to have them available on the front page already. So I think I will still need to populate Frontity with the posts from the CPT, but what is the correct procedure for this?
This is a link to my repo:
https://bitbucket.org/noesteijver/frontity/src/master/