如何在NextJS/阿波罗/graphql中使用从GetStaticProps (全球范围内)获取的数据？

Question

正如标题所述，我希望在另一个文件中，在另一个组件中使用来自GetStaticProps的数据。无法在组件中使用GetStaticProps，因为：

服务器错误:动态SSG页面需要getStaticPaths，“/title”缺少。

基本上，我希望在nextjs动态路由文件中使用从GetStaticProps收集的数据。我试着自己修了几个小时，研究了一下，却找不到解决办法。我需要帮助有什么建议吗？

下面您将从两个文件以及我的文件结构的图片中找到代码。

文件结构

index.js：

import s from '../styles/Home.module.css'
import { gql } from "@apollo/client";
import client from '../client/apollo-client';
import Postcard from '../components/Postcard';
import Logo from '../components/Logo';
import React, { useState, useEffect } from 'react';


export default function Home({ cards, WelcomeText, categories }) {

  // Store data in state
  let [data, setData] = useState(cards)


  // Filter start ======================================

  const [searchTerm, setSearchTerm] = useState('');

  // Filter end ========================================

  return (
    <div className={s.mainContainer}>
     
      <Logo/>
      <p className={s.welcomeText}>{WelcomeText.attributes.Text}</p>

      {/* Filter search start =========================== */}
      <div className={s.filterContainer}>
        <div className={s.searchContainer}>
          <p>
            <input className={s.searchFilther} type="text" placeholder="Search for topic..." onChange={event => {setSearchTerm(event.target.value)}} />
          </p>  
          
        </div>
      </div>
      {/* Filter search end =========================== */}

      <div className={s.contentContainer}>
        
        <div className={s.contentLeftColumn}>
        </div>

        <div className={s.contentRightColumn}>        
          {/* Cycle and filther through Postcards ===== Start*/}
          {data.filter((value)=>{
            if(searchTerm == ""){
              return value
            } else if (
              value.attributes.Title.toLowerCase().includes(searchTerm.toLowerCase())){
              return value
            } else if (
              value.attributes.Category_keywords.toLowerCase().includes(searchTerm.toLowerCase())){
              return value
            }
          }).map((card) => (
            <div  key={card.id} className={s.cardContainer}>
              <Postcard
                className={s.postCardContainer}
                clue={card.id}
                title={card.attributes.Title}
                duration={card.attributes.Duration}
                updateDate={card.attributes.updatedAt}
                description={card.attributes.Description}
                guide={card.attributes.UniqueLink === null ? `${card.attributes.Title}` :`${cards.attributes.UniqueLink}` }
                categories={card.attributes.categories.data.map((category)=>(
                            category.attributes.Category+" "))
                }
              />
            </div>
          ))}
          {/* Cycle and filther through Postcards ===== End*/}
          
        </div>
      </div>

    </div>
  )
}

// graphql request for Postcards
export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
    query PostCards{
      postCards(pagination: { start: 0, limit: 1000 }){
        meta{
          pagination {
            page
            total
            pageSize
            pageCount
          }
        }
        data{
          id
          attributes{
            Title
            Duration
            publishedAt
            updatedAt
            Description
            Category_keywords
            UniqueLink{
              UniqueLink
            }
            Link{
              Link
              Target
            }
             categories{
              data{
                id
                attributes{
                  Category
                }
              }
            }
          } 
        }
      }
    categories{
      data{
        id
        attributes{
          Category
        }
      }
    }
    welcomeText{
      data{
        attributes{
          Text         
        }
      }
    }
    postContents {
      data{
        id
        attributes{
          Title
        }
      }
    }
    }
    `
  })
 

 
// data.postCards.data returns Array of Postcards
// data.welcomeText.data returns just an intro text
  return {
    props: {
      cards: data.postCards.data,
      WelcomeText: data.welcomeText.data,
      categories: data.categories.data,

      // pagination
      totalCount: data.postCards.meta.pagination.total,
      pageCount: data.postCards.meta.pagination.pageCount,
      pageSize: data.postCards.meta.pagination.pageSize,

      // post content
      content: data.postContents.data,

    }
  }
}

title.js

const PostContent = () => {
    return ( 
        <div>
         
        </div>
     );
}
 
export default PostContent;

Answer 1

据我所知，根据getStaticProps在index.js中获取的帖子标题，每个帖子都需要动态页面。

您还应该使用getStaticPaths预呈现动态“标题”路径列表。

您可以阅读更多的这里