导出模块在功能前面还是在结尾 [英] Export module in front of function vs at end

问题描述

我正在 GatsbyJS 中开发一个应用程序，并且 export 将我的 GraphQL 片段之一如下:

从"gatsby"

  import {graphql};导出const w300Image = graphql`文件上的片段w300Image {childImageSharp {流体(最大宽度:300){...盖茨比ImageSharpFluidpresentationWidth}}}`;导出const squareImage = graphql`片段squareImage在文件上{childImageSharp {fluid(maxWidth:200，maxHeight:200){...盖茨比ImageSharpFluidpresentationWidth}}}`; 

我 import 并按以下方式使用 squareImage :

  import从'react'导入React；从"gatsby"导入{useStaticQuery，graphql};从'../graphql/imageFragments'导入{squareImage}；从'./nonStretchedImage'导入NonStretchedImage;const Image =()=>{const data = useStaticQuery(graphql`询问 {宇航员:file(relativePath:{eq:"gatsby-astronaut.png"}){... squareImage}}`);return< NonStretchedImage fluid = {data.astronaut.childImageSharp.fluid} alt ="nFront移动开发"/>}; 

注意:我的IDE警告我，永远不会读取 squareImage import .但是，由于事实并非如此，因此我假设它无法在GraphQL查询中获取它的存在.

问题

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

错误:始终违反:GraphQLCompilerContext:未知文档 squareImage .

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

从"gatsby"

  import {graphql};const w300Image = graphql`文件上的片段w300Image {childImageSharp {流体(最大宽度:300){...盖茨比ImageSharpFluidpresentationWidth}}}`;const squareImage = graphql`片段squareImage在文件上{childImageSharp {fluid(maxWidth:200，maxHeight:200){...盖茨比ImageSharpFluidpresentationWidth}}}`;导出{squareImage，w300Image}; 

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

编辑

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

解决方案

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

Gatsby 拉出graphql片段&从文件中查询并独立执行.因此，导出/导入graphql片段的工作方式有所不同.

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

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

更新:Gatsby仅查找

Note: My IDE warns me that the squareImage import is never read. However, since that is not true, I am assuming it is just incapable of picking up its presence inside the GraphQL query.

Question

If I change the export to the below (i.e. move the export to the end of the file), it crashes when compiling with the following error message:

Error: Invariant Violation: GraphQLCompilerContext: Unknown document squareImage.

New export code (only difference is the exports having moved to the end):

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

Any idea what's going on here? I thought the two exports were identical? Perhaps tree shaking happens in only one scenario?

EDIT

Added a console.log(squareImage) after the import, and the error still appears. In other words, tree shaking is not the culprit.

解决方案

TL:DR: You don't need to import fragment to use it in query with Gatsby

Gatsby pulls graphql fragments & queries out of your file and execute them independently. Because of this, exporting / importing graphql fragment works a little differently.

Since all query lives in the same namespace, once you export a named fragment in any of your files, it's available 'globally', i.e you can use it in other queries & fragment without importing them explitcitly.

This is why you can use the fragment GatsbyImageSharpFluid without importing it anywhere in your code.

Update: Gatsby only looks for query inside tagged template in named export i.e export const queryName = graphql``, this explains why it breaks when you switch export style.

这篇关于导出模块在功能前面还是在结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！