Contentful Tags not rendering on page - graphql

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>;
})