Gatsby中如何将DatoCMS片段查询传入组件？

看起来你已经走对了大部分路，只是漏掉了几个关键步骤，我来帮你梳理下：

1. 片段必须被导入到使用它的组件中 #

Gatsby不会自动识别其他文件里定义的片段，你需要在使用片段的组件里，明确导入包含片段的layouts/index.js文件。比如在你的组件文件顶部加上：

import '../layouts/index' // 注意根据你的实际文件路径调整

如果后续片段多了，更规范的做法是把所有片段单独放在src/fragments/目录下，每个片段一个文件，这样管理起来更清晰。

2. 确认片段的类型名称完全匹配 #

有时候Gatsby根据DatoCMS模型生成的GraphQL类型名称可能和你想的有出入（比如大小写差异）。你可以通过Gatsby的GraphiQL工具（访问http://localhost:8000/___graphql）验证一下：
执行这个查询，看看返回的__typename是不是DatoCmsHomeIntro：

query CheckTypeName {
  allDatoCmsHomeIntro {
    edges {
      node {
        __typename
      }
    }
  }
}

如果返回的类型名不一样，比如是DatoCmsHomeintro，你需要修改片段里的on后面的类型名称，确保完全一致。

3. 调整查询结构（可选，根据你的数据结构） #

你的原始普通查询是获取单个datoCmsHomeIntro节点，但组件里用的是allDatoCmsHomeIntro（集合查询）。如果你的HomeIntro在DatoCMS里是单条记录，其实用单个查询更简洁，和原始查询结构保持一致：

export const pageQuery = graphql`
  query IntroQuery {
    datoCmsHomeIntro {
      ...intro
    }
  }
`

如果确实是多条记录，那保持allDatoCmsHomeIntro的结构没问题，只是在组件里要遍历edges取节点数据。

4. 重启Gatsby开发服务器 #

修改片段后，Gatsby的缓存可能不会自动更新，重启gatsby develop能确保片段被正确识别和加载。

完整示例参考 #

layouts/index.js 中的片段定义

import { graphql } from 'gatsby'

export const introFragmentQuery = graphql`
  fragment intro on DatoCmsHomeIntro {
    introTitle: introTitleNode {
      markdown: childMarkdownRemark {
        html
      }
    }
    introImage {
      url
    }
  }
`

组件文件（比如 src/components/Intro.js）

import React from 'react'
import { graphql } from 'gatsby'
import '../layouts/index' // 导入片段所在文件

const Intro = ({ data }) => {
  // 单条记录的情况
  const introData = data.datoCmsHomeIntro
  // 多条记录的情况：const introData = data.allDatoCmsHomeIntro.edges[0].node

  return (
    <div className="intro-section">
      <div dangerouslySetInnerHTML={{ __html: introData.introTitle.markdown.html }} />
      <img src={introData.introImage.url} alt="Intro banner" />
    </div>
  )
}

export const pageQuery = graphql`
  query IntroQuery {
    datoCmsHomeIntro {
      ...intro
    }
  }
`

export default Intro

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