http://localhost:3000/about-us/in the browser. The simplest way is to click the link in the menu we've just created. Then - and this is important - refresh the page to clear out the state. This gives us a "blank canvas" version of the state so we can see how it works.
router, including the
state.router.linkthat we used earlier, which as we now know stores the current URL. You can also see data contained in
state.source, this is the data fetched by
@frontity/wp-sourcewhich is the package that connects Frontity to your WordPress site.
frontity.state.source.datain the console. This is where the information for each URL is stored. If you inspect
/about-us/, you can see that it’s of type
page, and that it has the
id184. Note also that the
isReadyproperty is set to 'true'. This means the data is ready for use in our application.
state.source.data. Then armed with the information provided there, crucially the content
id(though we can also check whether the data is ready for retrieval with
isReady, amongst other things), we can retrieve the actual content.
/about-us/is a page and has the ID 184, we can take the second step and access the data of that page with
contentto use in our components so that they get rendered in the browser. We also have access to the author ID and the post date. We will look at how we can use these in our components in later lessons.
@frontity/wp-sourceautomatically fetches everything it needs from the WordPress REST API and stores it in
frontity.state.source.data. You will notice that it's now populated with rather more data than before.
gethelper function to facilitate the first step of the two step data retrieval process. You should use this rather than attempting to access the data in
state.source.data[url]you should use the
state.source.get(url). This ensures that URLs always include the final slash (/).
isArchive, and an array of
items. If the homepage were a category it would have an
isCategoryproperty. If it were a post it would have an
isPostproperty, etc... These are boolean values so we just need to check for their truthiness.
gethelper function to get the information about the current link (stored in
state.router.link) and use it inside a
<main>element to see whether it’s a
post, or a
<Switch>component. This acts like the 'switch' statement in any programming language, the first matching condition is the one that is executed. But first we need to import the
<Switch>component, which we do similarly to the way in which we imported the