next.js - 使用 Next.js 和 WPGraphQL 进行客户端渲染后的未定义数据

Question

我使用 Next.js、Apollo 创建了一个应用程序，并使用 WPGraphQL 获取数据。到目前为止，我已经能够使用getStaticProps()和getServerSideProps()在页面文件上获取数据。但是，它不适用于组件中的客户端渲染，因为它要么继续加载，要么将数据记录为“未定义”。奇怪的是，当我从非 WPGraphQL url 获取数据时，相同的实现工作。

这是我的代码。

_app.js

import 'bootstrap/dist/css/bootstrap.css';
import '../public/css/styles.css';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { ApolloProvider } from "@apollo/client";
import client from "../apollo-client";

function MyApp({ Component, pageProps }) {
  return (
    <>
    <ApolloProvider client={client}>
      <Header />
      <Component {...pageProps} />
      <Footer />
    </ApolloProvider>
    </>
  );
}

export default MyApp;

./apollo-client.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: process.env.WP_API_URL,
    cache: new InMemoryCache(),
    headers: {
      authorization: process.env.WP_AUTHORIZATION,
    },
  });

export default client; 

./components/ClientOnly.js

import { useEffect, useState } from "react";

export default function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return <div {...delegated}>{children}</div>;
}

.components/Articles.js

import { useQuery, gql } from "@apollo/client";

const QUERY = gql`
query Articles {
  posts(where: { categoryName: "articles", status: PUBLISH}, last: 3) {
    edges {
      node {
        author {
          node {
            name
          }
        }
        featuredImage {
          node {
            sourceUrl
            srcSet
          }
        }
        title
        slug
      }
    }
  }
}
`;

export default function Articles() {
  const { data, loading, error } = useQuery(QUERY);

  if (loading) {
    return <h2>Loading...</h2>;
  }

  if (error) {
    console.error(error);
    return null;
  }

  const posts = data.posts.edges.map(({ node }) => node);
  console.log('THis is DATA',data)

  return (
    <div>
...