Clarifying How to Get Data from WordPress

[sattley]

Hi all,
I’ve been working with Fronity for a few months now and love it so far. Each time a try to do a task though I find myself re-reading how to work with the @frontity/wp-source

I’m hoping to get to the point where I just know that if I need to get X data out of WordPress, then this is the flow. Anyway to clarify something to this end:

• The only data that is available at a given time is what was automatically fetched from the current route - state.router.link - Is this correct?

Let’s say I’m on the homepage or '/' but I need to get data for a list of posts filtered by a certain category. If that data is not available at '/' - do I need to then request that data using actions.source.fetch("/category/somecategory/");

Thanks and if that is true then I think the documentation could be updated to be more explicit for newbs like me

[mburridge]

Hi @sattley

@sattley

The only data that is available at a given time is what was automatically fetched from the current route - state.router.link - Is this correct?

That isn’t completely correct, the data available at any given time is the data fetched for the current route and all the data that has previously been fetched for pages that have already been visited.

So, for example, if you land on a post archive page that data is fetched in SSR. If you then click a post link on the archive page in order to visit a single post page then the data for that page is fetched by the client (though it may not need to be fetched, it may already exist in the state - see paragraph below on pre-fetching **). Then if you return to the post archive page the data doesn’t need to be fetched again, it’s all already in the state.

@sattley

If that data is not available at '/' - do I need to then request that data using actions.source.fetch("/category/somecategory/");

You shouldn’t need to use actions.source.fetch() unless you need to do something special. Just providing a link to the category archive should fetch the data for you.

** If you’re using the <Link> component then you can define a pre-fetching strategy for links on a page. See here for more info on the auto-prefetch options.

Hope this helps.

[sattley]

Hi @mburridge,
As always thanks for the prompt follow up. This answers a good bit but I’m still confused as to how to get data for a specific scenario. Here is the scenario:

On my posts archive page I’d like to show a featured post above the archive - basically some information about a certain post that categorized as ‘featured’. I know I can access this type of post by viewing the following endpoint from my wp source - wp-json/wp/v2/posts?categories=1417

Right now I’m trying to get the data using libraries.source.api.get. More specifically:

const featuredPosts = libraries.source.api.get({
endpoint: “posts”,
params: { _embed: true, categories: “1417” }
});

Is this the correct approach?

Thanks @mburridge and hope you are getting some sleep

[mburridge]

Hi @sattley

If you have a specific use case for displaying posts then take a look at this demo project which does something similar and which should steer you in the right direction - though feel free to ask here if you have anymore questions or need clarification on anything.

@sattley

Thanks @mburridge and hope you are getting some sleep

What do you mean by that!!!

[sattley]

Thanks @mburridge. I ended up looking at that demo project for a bit and got the gist of it but using a handler was simpler code for me.

For now I just created this handler:

export const featuredPostHandler = {
  name: "featuredPost",
  priority: 10,
  pattern: "featured-post",
  func: async ({ route, params, state, libraries, force }) ={
    // 1. fetch the data you want from the endpoint page
    const response = await libraries.source.api.get({ 
      endpoint: 'posts',
      params: { 
        categories: "1417", // posts in featured category
        orderby: "date" // ordered by date
      },
      per_page: 1 // this seems to return a whole page of results not just 1 item
    });
    // this is where we get the actual data
    // 2. get our featured post object in json format
    const featuredPost = await response.json();
    // 3. add data to source
    const currentPageData = state.source.data[route];
    Object.assign(currentPageData, {
      ...featuredPost[0]
    });
  }
};