getStaticProps returns an empty object

Question

I'm using nextJS V9.5.5 with wp-graphql and apolloClient to get data from WordPress. Everything works fine, but when I try to return context (in the purpose of getting query) from getStaticProps() like it's described in docs, it returns an empty object.

Custom App:

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;

One of the page:

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;

Here is the log result:

How could I get context.query?

score 0 · Answer 1 · answered Dec 22 '20 at 07:32

0

The context parameter includes previewData contains the preview data set by setPreviewData. This means including function, therefore, unable to serealize. Take values out from context.params.

answered Dec 22 '20 at 07:32

Akihito KIRISAKI

1,243
6
12

getStaticProps returns an empty object

1 Answers1