1

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

4

1 回答 1

0

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

于 2020-12-22T07:32:52.907 回答