蓋茨比沒有找到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" ，但這里並非如此。