@frontity/wp-source

[juanma]

Questions about @frontity/wp-source

data content on first load

When I first load https://twentytwenty.frontity.org/ I get a lot of URL’s under the state.source.data

Are these all the URL’s available in the WP?
What is the meaning of the isReady property? Is that the proper link data has been fetched and it’s available under state.source[type][id]? Isn’t there already data about several posts under source.post just by visiting the home? Do we have this data of the (details of the) posts already available in source.post because of some pre-loading? Is this logic in the theme or it is an internal thing of Frontity?

api.get vs source.get

In the documentation we have source.get & api.get

As I understand the difference between these methods is…

• source.get → It’s a helper to read data from state.source.data. It normalizes the URL so, for example, it will work the same for

source.get('2016/shinjuku-gyoen-national-garden/')
source.get('2016/shinjuku-gyoen-national-garden')
source.get('/2016/shinjuku-gyoen-national-garden')

This source.get doesn’t perform any fetch. If the link data is not available under state.source.data it will return undefined. If we want to have the data of some link available we may need to perform a source.fetch before

• api.get → This method allows the developer to fetch data directly from the API and integrate with the source.state if it’s not already there

With this method we can fetch data from an alternative API or with alternative params: api.get({ endpoint, params, api?, isWpCom? })

What are some typical scenarios for using this method versus using source.fetch ?

handlers

Handlers are like hooks we can add to some fetch to specific links so more requests are made and alternative data is added to data.source

They can also be used to create custom links not existent in WP that we can use to do custom request to our WP API, to an alternative WP API or to any other REST API (non WP)

Is this correct?

---

[mmczaplinski]

@juanma

Are these all the URL’s available in the WP?

yes and no Those are not all the URLs that are available in WP, but indeed all of them are available in WP. Meaning, that they are all valid routes. You can verify this by running

And then navigating to a new page and running this command again. You will see that the length has increased because new data has been loaded.

The routes that you will see on the home page refer to all the entities that have been fetched just for viewing the home page, so that means that among other things:

• The first 10 posts have been fetched (each of them has a link, so we see the /2019/<postTitle>/ in state.source.data for each of the 10 posts)
• Each post has an author. Each author also has a link, so you will see the /author/<authorName>/ for each individual author for all the 10 posts in `state.source.data)
• The same goes for tags & categories for all the posts, etc.

@juanma

What is the meaning of the isReady property? Is that the proper link data has been fetched and it’s available under state.source[type][id] ?

Sort of yes! The value of isReady attribute tells you if the data for that page has been loaded or not yet. It could have been also been called isLoaded or something like that.

For example, if our state.source.data has

{ 
	"/2016/the-beauties-of-gullfoss/":  { isReady: true, ... },
}

that means that if we navigate to /2016/the-beauties-of-gullfoss/, the transition will be instantaneous because we have already loaded the data for that page. We have the data for the post.

@juanma

Isn’t there already data about several posts under source.post just by visiting the home? Do we have this data of the (details of the) posts already available in source.post because of some pre-loading ? Is this logic in the theme or it is an internal thing of Frontity?

That’s a really good question, but I think that there are a couple of different issues here. Let me try to explain

First, yes, there is some preloading going on in the twentytwenty theme in a couple of places. If you look at source.data it will show isReady: true for / and for /page/2/:

Why do we have the data for /page/2/? This is because the pagination component will prefetch the data for the “next page” if the next page exists. This is done inside of a useEffect in both mars-theme and twentytwenty.

Second, you will also notice that when you hover over any link (e.g. for a category or for a post title) the data for that route will also be prefetched! This is because the <Link/> react component in the 2020 them will also prefetch the data for that URL when you hover over it.

Third, we are also prefetching the data for / when the user opens any of the post pages.

---

But how does the data actually get into state.source.data and state.source[type]?

@juanma

This source.get doesn’t perform any fetch . If the link data is not available under state.source.data it will return undefined . If we want to have the data of some link available we may need to perform a source.fetch before

This is all correct.

@juanma

What are some typical scenarios for using this method versus using source.fetch ?

api.get() is a much more low-level method that should rarely be called by users themselves unless they are creating custom handler. This method will return the raw Response object that can be passed to api.populate().

source.fetch() is much higher level, and is the main method that the users will use to fetch the data in their react components. It actually calls api.get() and source.populate() internally!

@juanma

Handlers are like hooks we can add to some fetch to specific links so more requests are made and alternative data is added to data.source

They can also be used to create custom links not existent in WP that we can use to do custom request to our WP API, to an alternative WP API or to any other REST API (non WP)

Is this correct?

Yes, this is all correct, but let me know if you have more questions.