getStaticProps 返回一个空对象

问题描述

我使用带有 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？

解决方法

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