内容标签未在页面上呈现

Question

我正在创建文章卡片，我希望标签在卡片中呈现。我正在使用 NextJS 和 GraphQLClient 从 Contentful 获取数据。一切都被渲染但不是标签。

这是我的查询：

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

这是使用 GraphiQL 的结果：

这是我的文章页面，我希望标签显示在文章 post 卡片上：

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

你能帮我找出我做错了什么吗？

Answer 1

此处内容丰富的 DevRel。

contentfulMetadata.tags 是一个数组。提供的代码段模板假定 tags 是一个对象。

尝试遍历数组并分别呈现每个标签。

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

内容标签未在页面上呈现

Contentful Tags not rendering on page

contentful

graphql

next.js