Question

我正在 GatsbyJS 中开发一个应用程序，并export将我的 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
      }
    }
  }
`;

我import并按如下方式使用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 import。但是，由于这是不正确的，因此我假设它只是无法在GraphQL查询中获取它的存在。

问题

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

错误：始终违反：GraphQLCompilerContext：未知文档 squareImage。

新的导出代码（唯一的区别是export已移到末尾）：

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 };

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

编辑

在console.log(squareImage)之后添加了import，错误仍然出现。换句话说，摇树不是罪魁祸首。

Answer 1

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``，这说明了为什么在切换导出样式时会中断。

导出模块在功能前面还是在结尾

1 个答案: