使 GraphQL 查询可为空

Question

我有一个 GraphQL 查询来显示来自 Wordpress Headless 的帖子，但我有一些帖子没有 featuredImage，因此我得到 TypeError: Cannot read property 'node' of null.

如何让我的查询接受可为 null 的元素，从而在没有提供 featuredImage 的情况下显示页面？

这是我的查询：

import Image from "next/image";

export default function Post(data) {
  const post = data.post;
  return (
    <div>
      <h1>{post.title}</h1>
      <Image width="640" height="426" src={post.featuredImage.node.sourceUrl} />
      <article dangerouslySetInnerHTML={{ __html: post.content }}></article>
    </div>
  );
}

export async function getStaticProps(context) {
  const res = await fetch("https://www.torontowebmarketing.ca/graphql", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: `
        query SinglePost($id: ID!, $idType: PostIdType!) {
          post(id: $id, idType: $idType) {
              title
              slug
              content
              featuredImage{
                node {
                    sourceUrl
                }
               }
          }
        }
    
      `,
      variables: {
        id: context.params.slug,
        idType: "SLUG",
      },
    }),
  });
  const json = await res.json();

  return {
    props: {
      post: json.data.post,
    },
  };
}

Answer 1

不是 query/type 问题，fine/legal（探索 playground 文档中的类型）dataset/tree 中的某些道具具有空值.

只需准备您的渲染函数来处理空值，缺少一些值。您可以使用 条件渲染 执行此操作，在本例中：

{post.featuredImag && <Image....>}

使 GraphQL 查询可为空

Make GraphQL query nullable

wordpress

graphql

next.js

headless-cms