Post tag archive is not rendering

šŸ™‹Get Help
1

Hello everyone!

I am quite new with Frontity. Iā€™ve been checking documentation and have trying to find solutions in your community forum. However, I have been unsuccessful in finding the solution to my problem. :confused: So I thought I would give a try to ask for help here as I am running through problems to fetch the tag archive page on Frontity, and I canā€™t figure out what is wrongā€¦

So I have a tag, ā€œmina,ā€ which I am trying to render posts from this tag on the archive page. I have already figured out how to show tags in a post. However, by clicking on them, Iā€™ve got the following error in the browser: ā€œCannot read property ā€˜3ā€™ of undefinedā€ when going to http://localhost:3000/tag/mina/. I can tell that tag ā€œminaā€ is with the id ā€œ3ā€ when going to http://reinaldikodulehekulg.kinsta.cloud/wp-json/wp/v2/tags/3 (this is the link where it should fetch the tag archive to Frontity). But I canā€™t understand why it canā€™t read the tag propertyā€¦

Can anyone help me, please?

I am trying to accomplish with Frontity a personal website/blog. :slight_smile:

2

itā€™s likely that your source isnā€™t populated yet for that tag. have you fetched it in advance in beforeSSR for your route?

try first doing if(!whatever) return null before the line where you check whatever[3]
(Iā€™d need to see that block of code for clarity)

React will re-render and get past the null check when the data is finally populated by your fetch.

however for a tag page, I think the data is already populated, so this should work fine when visiting /tag/mina

<Switch>
  <Loading when={data.isFetching} />
  <TagTest when={data.isTag} />

const TagTest = ({ state, libraries, actions }) => {  

  const data = state.source.get(state.router.link)

  // data is ready when state.source.post 
  // has finished populating with posts with tag = mina
  return data.isReady && (
  
    <div>

      Tag Test: { data.id }

      {data.items.map(({ type, id }) => {
        
        const post = state.source[type][id];
        
        return (
        <div key={post.id}>
            {post.title.rendered}  
        </div>
        );

      })}
      
    </div>
  )
}

J

1 Like
3

Thanks for helping! I figured out what caused this error. Everything on my end was set up correctly, except that I tried to render something not available in my custom post types. For instance, I called two times component. However, the content (conditional header based on the post type) that I called in index.js from my second component has contained the custom ACF field that was not registered in my custom post type on the WP side. Therefore, Frontity was not able to read the property.

I found this error by starting from a clean state and debugging the difference in my previous install vs. the clean install.

Anyways, thanks for the useful information. I hope my article can benefit users with similar issues who are not ā€œskilledā€ with Frontity (like me). :slight_smile:

4

Iā€™m totally new to this too.

These forum questions help me experiment and learn!

Glad you got it sorted.

1 Like