盖茨比没有找到graphql片段

Posted 2023-03-08

【中文标题】盖茨比没有找到graphql片段

【英文标题】：Gatsby not finding graphql fragment

【发布时间】：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 文件夹中？

【参考方案1】：

这是Gatsby docs:的引述

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

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

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

【讨论】：

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