NextJS 标头 - 内容数据

编程问答 2022-04-24

问题描述

我想在我的标题菜单“学习”中显示“最近的文章”，但由于我使用的是 NextJS，因此无法在自定义组件中使用 getStaticProps。如何将我的 GraphQL 查询从我的文章页面传递到我的自定义组件？

谁能帮我举一个在页面上使用 getStaticProps 并传递给自定义组件的示例？

这是我的articles.jsx 文件的getStaticProps 部分，导入在顶部：

import {
  getPaginatedArticles,getPaginatedCases,getArticles,getRecentArticles,} from "../utils/contentful";

export async function getStaticProps() {
  const articles = await getPaginatedArticles();
  const cases = await getPaginatedCases();
  const categories = await getArticles();
  const recentArticles = await getRecentArticles();

  return {
    props: {
      articles: articles.articleCollection.items,cases: cases.caseCollection.items,categories: categories.articleCollection.items,recentArticles: recentArticles.articleCollection.items,},};
}

这是从上面导入的最近文章查询：

export async function getRecentArticles() {
  const recentArticlesQuery = gql`
    {
      articleCollection(order: date_DESC,limit: 3) {
        items {
          title
          slug
          excerpt
          date
          contentfulMetadata {
            tags {
              name
              id
            }
          }
          featuredImage {
            title
            url
            width
            height
          }
          author {
            name
            photo {
              fileName
              url
              width
              height
            }
            title
            twitterProfile
            linkedInProfile
            slug
          }
        }
      }
    }
  `;
  return graphQLClient.request(recentArticlesQuery);
}

正如开头提到的，如果我在文章页面中使用它，它会起作用，但我想在我的标题中使用它。

这是我的标题自定义组件中的“学习”菜单的简化版本：

export default function Header() {
  return (
   <div>
     <h3>Recent Posts</h3>
       <ul>{recentPosts.map((post) => (
         <li
          key={post.id}>
            <a href={post.href}>
              {post.name}
            </a>
         </li>
         ))}
       </ul>
  </div>
 )                                 
}

如何将数据从articles.jsx 文件引入我的自定义标题组件？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

getstaticprops