TypeError: Cannot read properties of null (reading 'title') - Graphcms - NextJs

Question

在我使用 graphCMS 作为后端的 Next Js 上，当我尝试从服务器获取 [slug].js 中单个项目页面的数据时，出现此错误。但是同一个项目它在 index.js 文件中使用 .map 方法工作。

SS of the error

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>

TypeError: Cannot read properties of null (reading 'title') - Graphcms - NextJs

TypeError: Cannot read properties of null (reading 'title') - Graphcms - NextJs

content-management-system

graphql

next.js