От: 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