Contentful Tags not rendering on page

Question

I'm creating article cards, and I want the tags to get rendered within the card. I'm using NextJS and GraphQLClient to fetch data from Contentful. Everything gets rendered but not the Tags.

This is my query:

export async function getArticles() {
  const articlesQuery = gql`
    {
      articleCollection {
        items {
          title
          slug
          excerpt
          date
          contentfulMetadata {
            tags {
              name
              id
            }
          }
          featuredImage {
            title
            url
            width
            height
          }
        }
      }
    }
  `;
  return graphQLClient.request(articlesQuery);
}

This is the results using GraphiQL:

This is my article page where I want the tags to appear on the article post cards:

export async function getStaticProps() {
  const articles = await getArticles();

  return {
    props: {
      articles: articles.articleCollection.items,
    },
  };
}

export default function ArticlesPage({ articles }) {
  return (
    <Wrapper>
      <div>
        <div>
          <div/>
        </div>
        <div>
          <div>
            {articles.map((article) => (
              <Link key={article.slug} href={`/articles/${article.slug}`}>
                <div key={article.title}>
                  <div>
                    <img
                      src={article.featuredImage.url}
                      alt=""
                    />
                  </div>
                  <div>
                    <div>
                      <p>
                        <a href={article.contentfulMetadata.tags.name}>
                          {article.contentfulMetadata.tags.name}
                        </a>
                      </p>
                      <a>
                        <p>
                          {article.title}
                        </p>
                        <p>
                          {article.excerpt}
                        </p>
                      </a>
                    </div>
                    <div>
                      <div>
                      </div>
                      <div>
                        <p>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </Wrapper>
  );
}

Can you help me spot what I'm doing wrong?

Answer 1

Contentful DevRel here.

contentfulMetadata.tags is an array. The provided snippet template assumes tags is an object.

Try iterating over the array and render each tag seperately.

article.contentfulMetadata.tags.map((tag) => {
  return <a href={tag.name}>
    {tag.name}
  </a>;
})