Frontity default state.source don't fetch all items once in loop

🙋Get Help
1

Frontity default state.source don’t fetch all items inside loop. I am trying to fetch posts from custom api route which return id, link, type, slug in json. When i console.log custom route it returns all 5 items. but when i fetch data with state.source[item.type][item.id] it fetch only first 1 from json output. If i tried to return all posts data in custom route and show post title, post link direct in component and click on link it move to 404 page.

please help, if i can’t solve this issue i can’t run site with frontity :frowning:

3

Screenshot_2
Screenshot_21474×779 45.8 KB

4

Hi @harpreet.freelance

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

What is the custom api route you’re trying to get the data from?
In Frontity, all the logic is delegated to packages. The package @frontity/wp-source is the one responsible of getting the data from the WordPress REST API

This package includes the method libraries.source.api.get() which you can use to make custom requests to custom REST API routes

Example

const postBeautiesGullfoss = await api.get({
  endpoint: "/acf/v3/posts",
  params: { slug: "/the-beauties-of-gullfoss" },
});

You can combine the result of libraries.source.api.get() with libraries.source.populate() to populate the results got to the state

And you can encapsulate this logic of doing custom requests and populating results to the state by defining a handler which will create a custom route in Frontity that will trigger any logic you define within it

Hope this helps

6

Here my git repo

8

I am getting featured posts ids successfully, but issue is when fetching state.source[type][id] is calling in loop its fetch only first id data from array. How i can solve this?

9

Hi @harpreet.freelance ,

Congratulations on your project! It seems to be a very interesting one.

Regarding your issue, it seems your handler packages/twentytwenty-theme/src/components/handlers/featured-posts.js is properly defining your custom route /getFeaturedPosts that is populating the information received from your REST API to Frontity’s state :+1:

{
  isFetching: false,
  isReady: true,
  route: 'getFeaturedPosts/',
  link: 'getfeaturedposts/',
  query: {},
  page: 1,
  items: [
    {
      id: 398,
      type: 'post',
      slug: 'abeiku-santana-on-fanny-faces-case-on-live-radio',
      link: 'https://p1.iwc-r1.com/abeiku-santana-on-fanny-faces-case-on-live-radio/'
    },
    {
      id: 363,
      type: 'post',
      slug: 'diana-hamilton-sadly-breaks-silence-on-how-her-sister-lost-her-four-children',
      link: 'https://p1.iwc-r1.com/diana-hamilton-sadly-breaks-silence-on-how-her-sister-lost-her-four-children/'
    },
    {
      id: 332,
      type: 'post',
      slug: '22-beautiful-stunning-photos-of-ghanaian-nurses-who-still-look-young',
      link: 'https://p1.iwc-r1.com/22-beautiful-stunning-photos-of-ghanaian-nurses-who-still-look-young/'
    },
    {
      id: 324,
      type: 'post',
      slug: 'afia-schwarzenegger-biography-arrested-age-children-husband-career-awards-controversy-charity-car-net-worth',
      link: 'https://p1.iwc-r1.com/afia-schwarzenegger-biography-arrested-age-children-husband-career-awards-controversy-charity-car-net-worth/'
    },
    {
      id: 316,
      type: 'post',
      slug: 'yaw-tog-biography',
      link: 'https://p1.iwc-r1.com/yaw-tog-biography/'
    }
  ],
  isFeaturedPosts: true
}

But it seems you’re missing a step in this process. The information you’re getting is a reference of the links that are considered as Featured posts but once you have that information, you need to fetch those links so the detailed information of each post is properly populated to state.source[type][id] (state.source["post"][316], state.source["post"][324], state.source["post"][332]… and so on in your case)

Maybe you can add some extra logic to your beforeSSR to take care of these extra fetch you need to do to have the post details available in the state. You could do something like…

   beforeSSR: async ({ state, actions }) => {
        await Promise.all(
          [
            // getWPConfig,
            actions.source.fetch("acf/options"),
            actions.source.fetch("acf/identity"),
            actions.source.fetch("getWPConfig"),
            actions.source.fetch("menu/header-menu"),
            actions.source.fetch("getFeaturedPosts"),
          ]
        );

        const data = state.source.get("getFeaturedPosts");    
        await Promise.all(
          data.items
              .map(({link}) => link)
              .map(link => actions.source.fetch(link))
          )
      },

As actions.source.fetch will take care of both doing the fetch and populating the data to the state, after this extra logic your post details will be available at state.source[type][id]

I recommend you to follow the https://tutorial.frontity.org/ to review some of the topics related to Frontity. I think this chapter may be specially useful to understand how the state in Frontity works

I also recommend you to have a look at this video where we explain how to debug a Frontity site from both the Client side and the Server side

Hope this helps

11

Screenshot_1
Screenshot_1942×835 49.7 KB

Here i am getting new errors :frowning:

Here is my code on codesandox can you please check where is issue :frowning:

12

Anyway its working on Code Sandox thank you :slight_smile: let me fix on local because its not working in local.