时间戳

首页 > 解决方案 > 内容标签未在页面上呈现

graphql - 内容标签未在页面上呈现

问题描述

我正在创建文章卡片，我希望在卡片中呈现标签。我正在使用 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 的结果： 在此处输入图像描述

这是我的文章页面，我希望标签出现在文章明信片上：

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

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

标签： graphqlnext.jscontentful

解决方案

内容丰富的 DevRel 在这里。

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

尝试遍历数组并分别渲染每个标签。

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

推荐阅读