如何在 NextJS/apollo/graphql 中全局使用从 GetStaticProps 中选取的数据？

Question

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

Server Error Error: getStaticPaths is required for dynamic SSG pages and is missing for '/[title]'.

基本上，我想在 nextjs 动态路由文件中使用从 GetStaticProps 收集的数据。试图自己修复它几个小时，进行了研究但找不到修复方法。我需要帮助，有什么建议吗？

您可以在下面找到这两个文件的代码以及我的文件结构的图片。

Filestructure

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

据我了解，您需要根据 post 的标题为每个 post 动态页面，您在 index.js 中使用 getStaticProps 获取这些标题。

您还应该使用 getStaticPaths 来 pre-render 动态“标题”路径列表。

你可以阅读更多here

如何在 NextJS/apollo/graphql 中全局使用从 GetStaticProps 中选取的数据？

How to use data picked from GetStaticProps, globally in NextJS/apollo/graphql?

reactjs

next.js