我花了几个小时和一点理智试图解决这个问题，但没有运气，尽管我在路上尝试了所有的事情。
所以我有这个代码`

import { request } from "graphql-request";
import Link from "next/link";
import { useState } from "react";
import useSWR from "swr";

const fetcher = (endpoint, query, variables) => request(endpoint, query, variables);

export const getStaticProps = async () => {
  const data = await fetcher(
    "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/clh4qcnhy5i5r01um1qbo28dj/master",
    `query getPosts {
      postsConnection(orderBy: date_DESC, first: 2, skip: 0) {
        edges {
          node {
            id
            title
            date
            slug
            description
            author {
              name
            }
          }
        }
        pageInfo {
          hasNextPage
          hasPreviousPage
          pageSize
        }
      }
    }`,
  );

  return {
    props: {
      posts: data,
    },
  };
};

export default function BlogPage({ posts }) {
  console.log(posts);
  const [searchValue, setSearchValue] = useState("");
  const [skip, setSkip] = useState(0);
  const { data, error } = useSWR(
    [
      "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/clh4qcnhy5i5r01um1qbo28dj/master",
      `query getPosts($searchValue: String $skip: Int) {
        postsConnection(orderBy: date_DESC, where: {title_contains: $searchValue}, first: 2, skip: $skip) {
          edges {
            node {
              id
              title
              date
              slug
              description
              id
              author {
                name
              }
            }
          }
          pageInfo{
            hasNextPage
            hasPreviousPage
            pageSize
          }
        }
      }
      
  `,
      searchValue,
      skip,
    ],
    (endpoint, query) => fetcher(endpoint, query, { searchValue, skip }),
    { initialData: posts, revalidateOnFocus: true },
  );

  if (error) {
    return (
      <div>
        <h2>There was an error with the data fetching</h2>
      </div>
    );
  }
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-0">
      <h1 className="text-5xl text-gray-600 font-serif mb-6 font-bold">The Blog</h1>
      <div>
        <input
          type="text"
          value={searchValue}
          placeholder="Search blog posts"
          className="focus:outline-none mb-6 focus:ring-2 focus:ring-gray-900 w-full rounded-lg border h-10 pl-4 text-lg text-gray-800 border-gray-200"
          onChange={(event) => setSearchValue(event.target.value)}
        />
      </div>
      <div>
        {data.postsConnection?.edges?.map((post) => (
          <div key={post.node.slug} className="grid grid-cols-1 md:grid-cols-4 py-6">
            <div className="mb-2 md:mb-0 md:col-span-1">
              <p className="text-gray-600 text-sm">{new Date(post.node.date).toDateString()}</p>
            </div>
            <div className="md:col-span-3">
              <Link href={`/blog/${post.node.slug}`}>
                <a className="text-2xl font-semibold text-gray-900 hover:text-gray-700 transition-colors duration-300">
                  {post.node.title}
                </a>
              </Link>
              <p className="text-gray-700 leading-relaxed">{post.node.description}</p>
              <div className="text-sm text-gray-900 font-semibold mt-1">
                {post.node.author.name}
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="flex space-x-5 justify-center items-center mt-10">
        <div>
          <button
            onClick={() => {
              setSkip(skip - 2);
            }}
            disabled={!data.postsConnection.pageInfo.hasPreviousPage}
            className="bg-indigo-700 w-20 text-white px-3 py-1 rounded-md disabled:bg-gray-400 disabled:text-gray-800">
            Previous
          </button>
        </div>
        <div>
          <button
            onClick={() => {
              setSkip(skip + 2);
            }}
            disabled={!data.postsConnection.pageInfo.hasNextPage}
            className="bg-indigo-700 w-20 text-white px-3 py-1 rounded-md disabled:bg-gray-400 disabled:text-gray-800">
            Next
          </button>
        </div>
        <div className="text-gray-700">Total Pages: {data.postsConnection.pageInfo.pageSize}</div>
      </div>
    </div>
  );
}

然后抛出一个错误
TypeError：无法读取未定义的属性（阅读“postsConnection”）

Source
pages/blog/index.js (105:14) @ BlogPage

  103 | </div>
  104 | <div>
> 105 |   {data.postsConnection?.edges?.map((post) => (
      |        ^
  106 |     <div key={post.node.slug} className="grid grid-cols-1 md:grid-cols-4 py-6">
  107 |       <div className="mb-2 md:mb-0 md:col-span-1">
  108 |         <p className="text-gray-600 text-sm">{new Date(post.node.date).toDateString()}</p>`

当我用代码上的查询直接查询graphQL时，一切都很顺利，下面是这些查询的结果，getStaticProps query `

{
  "data": {
    "postsConnection": {
      "edges": [
        {
          "node": {
            "id": "clh4w8dhkaufl0bw1jux7ek2y",
            "title": "React Toast Component and Custom Hook using Tailwindcss",
            "date": "2023-05-01T13:45:00+00:00",
            "slug": "react-toast-component-and-custom-hook-using-tailwindcss",
            "description": "Toasts are basically just notifications. When you have a complex application or you need a lot of input",
            "author": {
              "name": "HerminioHenriques"
            }
          }
        },
        {
          "node": {
            "id": "clh4tgvgxac9f0bt92iyuni90",
            "title": "Dummy markdown post",
            "date": "2023-05-01T12:26:00+00:00",
            "slug": "dummy-markdown-post",
            "description": "How to use markdown language",
            "author": {
              "name": "HerminioHenriques"
            }
          }
        },
        {
          "node": {
            "id": "clh4var6yaqwl0bw1aefk73rc",
            "title": "Next.js, Typescript and ESLint Starter Configuration",
            "date": "2023-04-25T17:00:00+00:00",
            "slug": "nextjs-typescript-and-eslint-starter-configuration",
            "description": "This blog post will guide you through configuring a new Next.js project, ready to go with Typescript, ESLint and pre-commit checking with Husky",
            "author": {
              "name": "HerminioHenriques"
            }
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": false,
        "hasPreviousPage": false,
        "pageSize": 3
      }
    }
  }
}

and BlogPage query

{
  "data": {
    "postsConnection": {
      "edges": [
        {
          "node": {
            "id": "clh4tgvgxac9f0bt92iyuni90",
            "title": "Dummy markdown post",
            "date": "2023-05-01T12:26:00+00:00",
            "slug": "dummy-markdown-post",
            "description": "How to use markdown language",
            "author": {
              "name": "HerminioHenriques"
            }
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": false,
        "hasPreviousPage": false,
        "pageSize": 1
      }
    }
  }
}

我只是不明白为什么我没有得到我的数据变量填充和没有数据的职位 prop 通过BlogPage是未定义的，有人可以请帮助我吗？