盖茨比没有找到graphql片段

Question

我正在尝试在 Gatsby 站点上使用 GraphQL 片段，我尝试按照指南创建此片段，但 Gatsby 抛出一个错误，指出我的片段不存在

The fragment "PageFragment" does not exist.

我将片段放在 Gatsby 项目根目录下名为“graphql-fragments”的文件夹中，该文件夹包含一个名为“pageFragment.js”的文件，它是我的片段 pageFragment.js

import { graphql } from "gatsby";

export const PageFragment = graphql`
  fragment PageFragment on SanityPage {
    slug {
      current
    }
    _rawContent(resolveReferences: { maxDepth: 20 })
    _id
    title
  }
`;

我在我的索引页面上使用了这个片段，我也得到了我的错误

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

export const query = graphql`
  query FrontpageQuery {
    page: sanityPage(_id: { regex: "/(drafts.|)frontpage/" }) {
      ...PageFragment
    }
  }
`;


const Home = () => {
  return (
    <div>
      Hello world
    </div>
  )
}


export default Home

在没有片段的情况下运行 graphQL 查询工作正常，所以这有效，我得到了我期望的数据

export const query = graphql`
  query FrontpageQuery {
    page: sanityPage(_id: { regex: "/(drafts.|)frontpage/" }) {
      slug {
        current
      }
      _rawContent(resolveReferences: { maxDepth: 20 })
      _id
      title
    }
  }
`;

盖茨比似乎没有找到我的片段，任何关于我做错了什么的线索？ 在 Gatsby 版本 2.24.66 上运行

Answer 1

这是Gatsby 文档中的一段话：

要创建片段，请在查询中定义它并将其导出为Gatsby 知道的任何文件的命名导出。 片段可用于任何其他 GraphQL 查询，无论其在项目中的位置如何。 片段在 Gatsby 项目中是全局定义的，因此名称必须是唯一的。

导出fragment的文件不能存放在gatsby-config.js等所在项目的根文件夹中。 如果 Gatsby 源文件位于名为src的文件夹中，则导出片段的文件必须位于src文件夹或其子文件夹之一中。

附带说明：我有时会忘记的一件事是添加import { graphql } from "gatsby" ，但这里并非如此。