Retrieve multiple taxonomy items at once, with slug or ID

🙋Get Help
1

I am trying to retrieve multiple custom taxonomy terms which I’ve configured in an ACF Taxonomy field in the theme settings. I’ve retrieved the content of the theme settings field. That means I have information like term_id, slug, etc.

But ACF doesn’t directly add the custom fields of the term itself, so I need Frontity to retrieve the term data, of course including the ACF fields.

This is an endpoint in my WordPress installation which works fine:
https://frontity.noesteprojecten.nl/wp-json/wp/v2/opdrachtgever?slug=ligarus,lumens

But when I try to use this endpoint in Frontity, I’m seeing the following error:
ServerError: post type from endpoints "posts,pages,media" with slug "opdrachtgever" not found

Frontity doesn’t seem to know that ‘opdrachtgever’ is a taxonomy, instead of a post-type, although I’ve added it to my frontity.settings.js file like this:

taxonomies: [
  {
    taxonomy: "opdrachtgever",
    endpoint: "opdrachtgever",
    postTypeEndpoint: "portfolio",
    params: {
      per_page: 20,
      _embed: true,
    },
  },
]

This is my code in which I try to retrieve the configured terms. termSlugs contains the slugs of the configured terms, separated with a comma. So like this: /opdrachtgever?slug=ligarus,lumens

if (termIDs.length > 0) {
      const termLink = `/opdrachtgever?slug=${termSlugs}`;

      useEffect(() => {
         actions.source.fetch(termLink);
      }, []);

      dataTerm = state.source.get(termLink);
   }

What do I need to do to make Frontity understand that it needs to retrieve the information of terms instead of a post-type?

Or does this approach actually not work and do I need to fetch every post separately? And if I would put this in a forEach, wouldn’t that be way heavier then putting it in one fetch?

2

Maybe one page where you list your three different taxonomies with its own separate component pages.

3

Maybe I don’t understand what you mean. But if you mean that I need to create a page on which I list the three taxonomy terms, I don’t really think that’s a solution as I want this to be a configurable option. So I can’t on beforehand create a page where I list the taxonomies with code, since I don’t know what terms are going to be added by the user.

For now I am loading the details of the terms in a for loop, but I think this is sub-optimal as it generates a lot more fetch calls then if all terms are being fetched in one go.

4

Hi @dominique

Do you have a repo that I can clone so that I can dig into this a bit?

1 Like
5

Hi @mburridge,

You can find the repository here: https://bitbucket.org/noesteijver/frontity/src/master/

The code for the slider (first slider on the home page) can be found in featured-clients.js.

In that file I am now retrieving all configured taxonomy terms separately in this block (line 34):

sliderItems.forEach((val, key) => {
      const termLink = `/${val.taxonomy}/${val.slug}`;

      useEffect(() => {
         actions.source.fetch(termLink);
      }, []);

      dataTerm = state.source.get(termLink);

      if (dataTerm.isReady) {
         retrievedSliderItemsCount++;
      }
   });

As you can see further on in the code (line 53) I’m also generating a string imagesString with the slugs of the images, which I use once in the file featured-client.js (single) to fetch all images, which works. I’m not sure why this works for images but not for the taxonomy terms. Maybe there’s a crucial difference in the way how a post-type (images) and taxonomy terms are being fetched?

7

I notice now that when doing the following:

const imgs = 'noeste_ijver-portfolio-ligarus-graphic-4,noeste_ijver-portfolio-ligarus-liga-4,noeste_ijver-portfolio-ligarus-rus,noeste_ijver-portfolio-ligarus-header_front-1,custom-rook-front-3';
   
useEffect(() => {
   actions.source.fetch(`/media/${imgs}`);
}, []);

const img = state.source.get(`/media/${imgs}`);

I’m seeing the following error in my browser console:
ServerError: You have tried to access content at route: /media/noeste_ijver-portfolio-ligarus-graphic-4,noeste_ijver-portfolio-ligarus-liga-4,noeste_ijver-portfolio-ligarus-rus,noeste_ijver-portfolio-ligarus-header_front-1,custom-rook-front-3/ but it does not exist

But, the image actually are added to state.source.attachment. If I disable the function and refresh, the images are not there. So it actually seems to work, but it also throws an error.