盖茨比没有找到graphql片段答案

【问题标题】：Gatsby not finding graphql fragment盖茨比没有找到graphql片段
【发布时间】：2021-01-16 15:48:13
【问题描述】：

我正在尝试在 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 上运行

【问题讨论】：

您是否尝试将 /graphql-fragments 文件夹移动到 /src 文件夹中？

标签： javascript graphql gatsby

【解决方案1】：

这是Gatsby docs:的引述

要创建片段，请在查询中定义它并将其导出为命名从盖茨比知道的任何文件导出。片段可用于在任何其他 GraphQL 查询中使用，无论它在项目。片段是在 Gatsby 项目中全局定义的，所以命名必须是独一无二的。

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

附带说明：我有时会忘记添加import { graphql } from "gatsby"，但这里不是这样。

【讨论】：

感谢您提供有效且有用的旁注。