GraphQL是否将null视为真值？Gatsby查询CMS数据的疑问

看起来你遇到的核心问题是：你的CMS API返回的contentBlock包含所有可能的组件字段（比如introText），不管这些字段有没有实际内容，导致GraphQL查询结果里充满了null值。而@skip指令没达到预期效果，是因为它的工作方式和你想的不一样——咱们来一步步解决这个问题。

为什么@skip指令不起作用？ #

GraphQL的@skip和@include指令是基于查询时的静态条件或变量来决定是否包含字段，而不是基于返回字段的实际值。比如：

• @skip(if: false)：静态条件为false，所以永远不会跳过字段，自然没效果
• @skip(if: true)：静态条件为true，直接跳过所有introText字段，不管它有没有值

这些指令无法根据返回的body是否为null来动态决定是否返回introText对象，因为它们的判断逻辑在查询执行前就确定了，没法访问查询结果的数据。

解决方案 #

根据你的需求，有几种可行的处理方式，按推荐优先级排序：

1. 从源头（CMS/API）优化（最彻底） #

如果能控制CMS的GraphQL配置，建议调整它的schema，让contentBlock只返回实际存在的组件字段。比如，把contentBlock设计成联合类型（Union Type），每个组件类型只包含自己的专属字段，而不是所有组件字段都混在一个类型里。这样查询时就能精准获取每个组件的实际字段，不会出现大量null。

2. 在Gatsby节点处理阶段过滤数据 #

如果没法修改API，你可以在Gatsby拉取数据后，通过gatsby-node.js的钩子函数清理数据，去掉null字段。这样查询时就能直接拿到干净的数据。

举个例子，在onCreateNode钩子中处理页面节点：

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions;

  // 只处理你的Page类型节点，替换成实际的节点类型名
  if (node.internal.type === 'Pages') {
    // 清理每个contentBlock，只保留有非null值的字段
    const cleanedBlocks = node.contentBlocksArray.map(({ contentBlock }) => {
      const cleanedContentBlock = {};
      // 仅保留introText存在且body非空的情况
      if (contentBlock.introText?.body) {
        cleanedContentBlock.introText = contentBlock.introText;
      }
      // 其他组件字段（比如图片、正文）可以用同样逻辑处理
      // if (contentBlock.image?.url) {
      //   cleanedContentBlock.image = contentBlock.image;
      // }
      return { contentBlock: cleanedContentBlock };
    }).filter(block => Object.keys(block.contentBlock).length > 0); // 过滤掉空的contentBlock

    // 添加一个新的字段到节点，供后续查询使用
    createNodeField({
      node,
      name: 'cleanedContentBlocks',
      value: cleanedBlocks,
    });
  }
};

之后在GraphQL查询中，就可以使用cleanedContentBlocks字段：

query Demo {
  allPages {
    Pages {
      title
      fields {
        cleanedContentBlocks {
          contentBlock {
            introText {
              body
            }
          }
        }
      }
    }
  }
}

3. 前端渲染时过滤（最简单快捷） #

如果不想修改Gatsby的节点处理逻辑，也可以在React组件渲染时直接过滤掉null内容：

// 假设page是从GraphQL查询拿到的页面数据
{page.contentBlocksArray.map((block, index) => {
  const { introText } = block.contentBlock;
  // 只有当introText的body存在时才渲染
  if (!introText?.body) return null;
  return (
    <div key={index} className="intro-text">
      {introText.body}
    </div>
  );
})}

这种方式不需要修改数据流程，适合快速解决渲染时的null问题，但查询结果里还是会有null值，只是前端不渲染而已。

内容的提问来源于stack exchange，提问作者andrewmenich