Модуль экспорта перед функцией против конца - PullRequest
Новая
       10

Модуль экспорта перед функцией против конца

3 голосов
/ 02 апреля 2019

Я занимаюсь разработкой приложения на 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
      }
    }
  }
`;

I 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 были идентичны? Возможно, сотрясение дерева происходит только в одном сценарии?

EDIT

Добавлено console.log(squareImage) после import, и ошибка все еще появляется. Другими словами, сотрясение деревьев не является виновником.

1 Ответ

3 голосов
/ 02 апреля 2019

TL: DR : вам не нужно импортировать фрагмент, чтобы использовать его в запросе с Гэтсби

Гэтсби извлекает графические фрагменты и запросы из вашего файла и выполняет их независимо. Из-за этого экспорт / импорт фрагмента graphql работает немного по-другому.

Поскольку все запросы находятся в одном и том же пространстве имен, после экспорта именованного фрагмента в любой из ваших файлов он становится «глобальным», т. Е. Вы можете использовать его в других запросах и фрагментах без явного импорта.

Вот почему вы можете использовать фрагмент GatsbyImageSharpFluid, не импортируя его нигде в вашем коде.

Обновление: Гэтсби ищет только запрос внутри тегового шаблона в именованном экспорте , т.е. export const queryName = graphql``, это объясняет, почему он прерывается при переключении стиля экспорта.

...