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.frontity.state
in order to see the Frontity state.[[Target]]
in order to see the state.router
, including the state.router.link
that 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-source
which is the package that connects Frontity to your WordPress site.frontity.state.source.data
in 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 id
184. Note also that the isReady
property 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 type
and the 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 frontity.state.source.page[184]
:title
and the content
to 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-source
automatically fetches everything it needs from the WordPress REST API and stores it in state.source
.frontity.state.source.data
. You will notice that it's now populated with rather more data than before.get
helper 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
directly.state.source.data[url]
you should use the get
helper function: state.source.get(url)
. This ensures that URLs always include the final slash (/).frontity.state.source.get('/')
:isHome
, isArchive
, and an array of items
. If the homepage were a category it would have an isCategory
property. If it were a post it would have an isPost
property, etc... These are boolean values so we just need to check for their truthiness.get
helper 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 list
, a post
, or a page
.<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 <Link>
component previously.