Hi heroes of Frontity,
I started playing around with Frontity this week and am very excited about it!
Now, I want to try and rebuild our corporate site with Frontity. We use ACF to expand WordPress. I started trying to access an options page called ātheme-identity-settingsā, but it just wonāt work. I want to use the content of this endpoint on multiple pages, so I figured it should be added in the beforeSSR?
I came across this topic, where it seems to work out for countfak. Either Iām messing up the information in this topic, or something has changed?
The url of my endpoint is: https://gatsby-wp.noesteprojecten.nl/wp-json/acf/v3/options/theme-identity-settings. Excuse me for having āGatsbyā in it, I was testing out Gatsby previously and saw no point in creating a new WordPress installation when I could just use this one. 
So, this is my index.js:
import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import iframe from "@frontity/html2react/processors/iframe";
// Custom handler for ACF options
const acfOptionsHandler = {
pattern: "theme-identity-settings",
func: async ({ route, state, libraries }) => {
// 1. Get ACF option page from REST API.
const response = await libraries.source.api.get({
endpoint: `/acf/v3/options/options`
});
const option = await response.json();
// 2. Add data to `source`.
const data = state.source.get(route);
Object.assign(data, { ...option, isAcfOptionsPage: true });
}
};
const marsTheme = {
name: "@frontity/mars-theme",
roots: {
/**
* In Frontity, any package can add React components to the site.
* We use roots for that, scoped to the `theme` namespace.
*/
theme: Theme,
},
state: {
/**
* State is where the packages store their default settings and other
* relevant state. It is scoped to the `theme` namespace.
*/
theme: {
menu: [],
isMobileMenuOpen: false,
featured: {
showOnList: false,
showOnPost: false,
},
},
},
/**
* Actions are functions that modify the state or deal with other parts of
* Frontity like libraries.
*/
actions: {
theme: {
beforeSSR: async ({ state, actions }) => {
await Promise.all([
actions.source.fetch("/theme-identity-settings"),
]);
},
toggleMobileMenu: ({ state }) => {
state.theme.isMobileMenuOpen = !state.theme.isMobileMenuOpen;
},
closeMobileMenu: ({ state }) => {
state.theme.isMobileMenuOpen = false;
},
},
},
libraries: {
html2react: {
/**
* Add a processor to `html2react` so it processes the `<img>` tags
* inside the content HTML. You can add your own processors too
*/
processors: [image, iframe],
},
handlers: [acfOptionsHandler]
},
};
export default marsTheme;
And this is on my frontpage.js, which is called when isHome is true.
const MyComp = ({ state }) => {
const options = state.source.get("theme-identity-settings");
console.log(options);
return <div>...</div>;
}
And this is the content of that console.log:
{ā¦}
isFetching: false
isReady: false
link: "theme-identity-settings/"
page: 1
query: Object { }
route: "theme-identity-settings/"
<prototype>: Object { ā¦ }
frontpage.js:8:10
Iām not sure where Iām going wrong, if I have all the needed functionality implemented, or even too much. Any help is greatly appreciated!
