getStaticProps 返回一个空对象

Posted 2023-03-08

【中文标题】getStaticProps 返回一个空对象

【英文标题】：getStaticProps returns an empty object

【发布时间】：2021-03-31 20:32:22

【问题描述】：

我正在使用带有 wp-graphql 和 apolloClient 的 nextJS V9.5.5 从 WordPress 获取数据。一切正常，但是当我尝试从 getStaticProps() 返回上下文（以获取查询的目的）时，就像文档中描述的那样，它返回一个空对象。

自定义应用：

import React from "react";
import getConfig from "next/config";
import LayoutOuter from "../components/LayoutOuter";
import "bootstrap/dist/css/bootstrap.css";
import  ApolloProvider  from "@apollo/client";
import  useApollo  from "../lib/apolloClient";
import  initializeApollo  from "../lib/apolloClient";
import  gql  from "@apollo/client";

const  serverRuntimeConfig, publicRuntimeConfig  = getConfig();
const  DOMAIN  = publicRuntimeConfig;
function CustomApp( pageProps, Component, props ) 
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client=apolloClient>
      console.log("_app", props)
      <LayoutOuter>
        <Component ...pageProps />
      </LayoutOuter>
    </ApolloProvider>
  );


CustomApp.getInitialProps = async (ctx) => 
  const apolloClient = initializeApollo();

  await apolloClient.query(
    query: gql`
      
        // my graphql query here
      
    `,
  );
  return 
    props: 
      initialApolloState: apolloClient.cache.extract(),
      ctx: JSON.stringify(ctx),
    ,
  ;
;

export default CustomApp;

其中一页：

import React,  Component, useEffect, useState  from "react";
import getConfig from "next/config";
import  NextSeo  from "next-seo";

const  serverRuntimeConfig, publicRuntimeConfig  = getConfig();
const  DOMAIN, SITENAME  = publicRuntimeConfig;

import  initializeApollo  from "../lib/apolloClient";
import  gql  from "@apollo/client";
import "./services.module.scss";


const Home = (props) => 
  let currentPage = Object.values(props.initialApolloState.ROOT_QUERY)[1];

  const 
    title,
    metadesc,
    metaRobotsNoindex,
    metaRobotsNofollow,
    metaRobotsAdv,
    opengraphTitle,
    opengraphDescription,
    opengraphImage,
    twitterTitle,
    twitterDescription,
    twitterImage,
   = currentPage.seo;

  return (
    <>
      console.log("project", props)
      <NextSeo
        noindex=metaRobotsNoindex
        nofollow=metaRobotsNofollow
        title=title != "" ? title : `$props.data.pagetitle - $SITENAME`
        description=metadesc
        canonical=DOMAIN
        openGraph=
          url: DOMAIN,
          title:
            opengraphTitle != ""
              ? opengraphTitle
              : `$props.data.pagetitle - Garrison Collection`,
          description: opengraphDescription,
          images: [
            
              url: opengraphImage,
              width: 800,
              height: 600,
              alt:  SITENAME ,
            ,
          ],
          site_name:  SITENAME ,
        
      />
      <p>works</p>
    </>
  );
;

export async function getStaticProps(context) 
  const apolloClient = initializeApollo();

  await apolloClient.query(
    query: gql`
      
        project(id: "ca-souls", idType: SLUG) 
          seo 
            canonical
            metaDesc
            metaKeywords
            metaRobotsNofollow
            metaRobotsNoindex
            opengraphAuthor
            opengraphDescription
            opengraphModifiedTime
            opengraphpublishedTime
            opengraphPublisher
            opengraphSiteName
            opengraphTitle
            opengraphType
            opengraphUrl
            title
            twitterDescription
            twitterTitle
          
        
      
    `,
  );

  return 
    props: 
      initialApolloState: apolloClient.cache.extract(),
      context: JSON.stringify(context) || null,
    ,
    revalidate: 1,
  ;


export default Home;

这是日志结果：

我如何获得 context.query？

【参考方案1】：

The context parameter包含previewData包含setPreviewData设置的预览数据。这意味着包括功能，因此无法实现。从context.params 中取出值。