Gatsby解析模板中GraphQL失败问题求助

看起来你踩了Gatsby StaticQuery和页面查询的关键区别坑！虽然你在GraphiQL里能拿到数据，但把原本的页面查询改成StaticQuery后，动态生成页面的逻辑就彻底走不通了——这是因为StaticQuery的设计就不支持动态参数传递，而你通过createPage生成的项目子页面，恰恰需要依赖context里的动态数据（比如slug）来匹配Sanity中的内容。

下面是一步步的排查和解决方法：

1. 核心问题：StaticQuery不适合动态生成的页面 #

StaticQuery是用来获取静态、全局数据的（比如站点配置、全局导航），它无法接收组件props或者createPage传递的context变量。而你要生成的项目子页面是动态的——每个页面对应Sanity里的不同条目，需要根据slug来查询对应内容，这时候必须用页面查询（Page Query），因为页面查询可以接收createPage传递的context作为查询变量。

2. 把模板改回页面查询结构 #

把projectsSubPages.js改回类似另外两个正常模板的结构，比如：

import React from "react"
import { graphql } from "gatsby"

// 接收data props，由页面查询注入
const ProjectsSubPage = ({ data }) => {
  const subPage = data.sanityProjectSubPage
  if (!subPage) return <div>Loading...</div>

  return (
    <div>
      <h1>{subPage.title}</h1>
      {/* 其他渲染逻辑 */}
    </div>
  )
}

// 定义页面查询，接收$slug变量（来自createPage的context）
export const query = graphql`
  query ProjectsSubPageQuery($slug: String!) {
    sanityProjectSubPage(slug: { current: { eq: $slug } }) {
      title
      // 这里写你需要的其他字段，和GraphiQL里的一致
    }
  }
`

export default ProjectsSubPage

3. 确认gatsby-node中的createPage逻辑正确 #

确保你在gatsby-node.js里正确传递了slug到context，并且组件路径没有写错：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // 先查询所有项目子页面的slug
  const subPagesQuery = await graphql(`
    query GetAllProjectSubPages {
      allSanityProjectSubPage {
        nodes {
          slug {
            current
          }
        }
      }
    }
  `)

  if (subPagesQuery.errors) throw subPagesQuery.errors

  // 遍历生成每个页面
  subPagesQuery.data.allSanityProjectSubPage.nodes.forEach(subPage => {
    createPage({
      path: `/projects/${subPage.slug.current}`, // 自定义你的路径
      component: require.resolve("./src/templates/projectsSubPages.js"), // 确认路径正确
      context: {
        slug: subPage.slug.current, // 把slug传递给页面查询
      },
    })
  })
}

4. 排查其他可能的小问题 #

如果改回页面查询还是报错，检查这几点：

• 模板文件是否有语法错误：比如未闭合的JSX标签、未定义的变量、缺失的导入
• 确认文件后缀是.jsx或者你的Babel配置能正确处理.js里的JSX
• 清理Gatsby缓存：运行gatsby clean后再执行gatsby develop，缓存有时候会导致奇怪的解析问题
• 检查Sanity数据中的slug是否有特殊字符，或者是否存在空值

为什么GraphiQL里查询正常？ #

因为GraphiQL里你是手动传入了slug参数，而StaticQuery无法自动获取createPage传递的slug，所以模板里的StaticQuery要么查不到对应数据，要么直接导致Gatsby无法解析模板文件——这就是你看到"查询未被处理"错误的原因。

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