我正在GatsbyJS中开发一个应用程序,并以如下方式导出我的GraphQL片段之一：

import { graphql } from 'gatsby';

export const w300Image = graphql`
  fragment w300Image on File {
    childImageSharp {
      fluid(maxWidth: 300) {
        ...GatsbyImageSharpFluid
        presentationWidth
      }
    }
  }
`;

export const squareImage = graphql`
  fragment squareImage on File {
    childImageSharp {
      fluid(maxWidth: 200, maxHeight: 200) {
        ...GatsbyImageSharpFluid
        presentationWidth
      }
    }
  }
`;

我这样导入并使用squareImage：

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { squareImage } from '../graphql/imageFragments';
import NonStretchedImage from './nonStretchedImage';

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      astronaut: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        ...squareImage
      }
    }
  `);
  return <NonStretchedImage fluid={data.astronaut.childImageSharp.fluid} alt="nFront mobile development" />;
};

注意：我的IDE警告我,永远不会读取squareImage导入.但是,由于这是不正确的,因此我假设它只是无法在GraphQL查询中获取它的存在.

题

如果我将导出更改为以下内容(即,将导出移至文件末尾),则在编译时会出现以下错误消息,从而导致崩溃：

Error: Invariant Violation: GraphQLCompilerContext: Unknown document
squareImage.

新的导出代码(唯一的区别是导出已移至末尾)：

import { graphql } from 'gatsby';

const w300Image = graphql`
  fragment w300Image on File {
    childImageSharp {
      fluid(maxWidth: 300) {
        ...GatsbyImageSharpFluid
        presentationWidth
      }
    }
  }
`;

const squareImage = graphql`
  fragment squareImage on File {
    childImageSharp {
      fluid(maxWidth: 200, maxHeight: 200) {
        ...GatsbyImageSharpFluid
        presentationWidth
      }
    }
  }
`;

export { squareImage, w300Image };

知道这里发生了什么吗？我以为两个出口是相同的？也许摇树只在一种情况下发生？

编辑

导入后添加了console.log(squareImage),错误仍然出现.换句话说,摇树不是罪魁祸首.

解决方法:

TL：DR：您无需导入片段即可在Gatsby查询中使用它

Gatsby pulls graphql fragments & queries out of your file并独立执行.因此,导出/导入graphql片段的工作方式略有不同.

由于所有查询都位于同一个命名空间中,因此一旦您在任何文件中导出命名片段,该片段就可以“全局”使用,即可以在其他查​​询中使用它.片段,而无需立即导入.

这就是为什么您可以使用片段GatsbyImageSharpFluid而不将其导入代码中的任何位置的原因.

更新：盖茨比只寻找query inside tagged template in named export,即export const queryName = graphql“,这解释了为什么在切换导出样式时会中断.