От: https://andys.pro/blog/gatsby-field-image-must-not-have-a-selection-since-type-string

Вы, наверное, как я, создаете сайт с Gatsby и Netlify CMS. Эта проблема возникает в post-item.js, post.js или index.js с GraphQL. Мы новичок в запросах GraphQL и задаемся вопросом, почему все они запрашивают изображение следующим образом:

query Post($locale: String!, $title: String!) {
    markdownRemark(
      frontmatter: { title: { eq: $title } }
      fields: { locale: { eq: $locale } }
    ) {
      frontmatter {
        title
        description
        image {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      html
    }
  }

Когда вы запрашиваете "изображение" внутри "frontmatter", он возвращает вам URL-адрес. Однако вы хотите использовать этот URL-адрес с плагином резкости изображения, и проблема выскакивает:

Field "image" must not have a selection since type "String"

Это связано с тем, что Гэтсби все еще думает, что изображение представляет собой тип String, и вы ищете решение в Google, но вряд ли никакого решения. Я трачу часы на поиск решений, но нет четкого ответа, как решить эту проблему. Однако, взглянув на конкретный пакет github README, проблема решена. Вот как я это делаю!

Пакет называется: gatsby-comment-relative-images.

Https://github.com/danielmahon/gatsby-remark-relative-images

Используйте его с правильной конфигурацией

В gatsby-config.js вы должны сначала установить исходную файловую систему для ваших загружаемых файлов и страниц! Затем установите подключаемый модуль gatsby-transformer-comment с подключаемым модулем параметров внутри. Включите изображения-относительные-гэтсби перед изображениями-замечаниями-гэтсби!

Примечание. Папка мультимедиа должна быть включена раньше другого содержимого.

// gatsby-config.js
plugins: [
  // Add static assets before markdown files
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/static/uploads`,
      name: 'uploads',
    },
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/src/pages`,
      name: 'pages',
    },
  },
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        // gatsby-remark-relative-images must
        // go before gatsby-remark-images
        {
          resolve: `gatsby-remark-relative-images`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },
];

Еще один шаг к успеху!

Однако это все еще не решает нашу проблему. Поскольку мы используем его внутри frontmatter, нам нужно преобразовать путь из строкового типа в тип изображения, чтобы мы могли без проблем иметь childImageSharp.fluid.

Здесь нужно отредактировать gatsby-config.js

// gatsby-node.js
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node);
};

Это превращает весь путь к изображению из строкового типа в тип изображения. Однако, если вы не хотите преобразовывать все узлы, убедитесь, что вы ограничили узлы, используя условие if, например:

exports.onCreateNode = ({ node }) => {
	if (node.internal.type === `MarkdownRemark`) {
		fmImagesToRelative(node);
	}
};

Теперь наслаждайтесь резкостью изображения и уценкой для красивых сайтов.

Я использую его для блога моего клиента с большим заголовком героя изображения вроде этого: https://julies.pro