TypeError:无法读取null (读“标题”)的属性- Graphcms - NextJs

Question

在我使用graphCMS作为后端的下一个Js上，当我试图从服务器获取slug.js中单个项目页面的数据时，就会得到这个错误。但是，它使用index.js方法在.map文件中工作的项目是相同的。

误差SS

import { GraphQLClient, gql } from "graphql-request";

const graphcms = new GraphQLClient(
  "api url here"
);

const QUERY = gql`
  query Project($slug: String!) {
    project(where: { slug: $slug }) {
      id
      slug
      title
    }
  }
`;

export const SLUGLIST = gql`
  {
    projects {
      slug
    }
  }
`;

export async function getStaticProps({ params }) {
  const slug = params.slug;

  const data = await graphcms.request(QUERY, { slug });

  const project = data.project;

  return {
    props: {
      project,
    },
  };
}

export async function getStaticPaths() {
  const { projects } = await graphcms.request(SLUGLIST);

  return {
    paths: projects.map((project) => ({ params: { slug: project.slug } })),
    fallback: "blocking",
  };
}

export default function Project({ project }) {
  return (
    <div>
      <h1>This is single project page</h1>
      {/* Project container */}
      <div>
          <div>
            <h1>{project.title}</h1>
          </div>
    </div>
  );
}

Answer 1

据我所见，您的GraphQL客户端尚未配置为工作，因为这里有一个API url的"api url“。对我来说，你找不到这些设置的项目是有道理的。

考虑捕捉项目未定义的情况。您可以在页面中这样做。

if (!project) {
  return <> Project not found </>
}

或者在原来的代码中：

<h1>{project?.title || "project title not found"}</h1>