Что вызывает ошибку изображения [«Строка» не имеет подполей] в GraphQL / Gatsby?

#graphql #gatsby

#graphql #gatsby

Вопрос:

Все сообщение об ошибке на терминале:

 error GraphQL Error Field "image" must not have a selection since type "String" has no subfields.
 

Это похоже на настоящую ошибку, она появляется здесь:

проблема gatsby 4123
проблема gatsby 11412
проблема gatsby 11534
проблема gatsby 2050
проблема gatsby 3531
проблема плагина gatsby remark 2
netlify-проблема cms 325

А также несколько вопросов / ответов Stackoverflow.

Но ответы / исправления повсюду. Некоторые люди неправильно пишут свои файлы или неправильно заказывают плагины (я думаю). В других случаях человеку нужно выполнить большую перезапись exports.onCreateNode внутри gatsby-node.js . В других случаях исправление заключается в повторном клонировании вашего репозитория и повторном запуске npm install.

Во всяком случае, я попробовал то, что относится ко всему. Кажется, что еще многие десятки или сотни людей столкнутся с этой ошибкой, когда попытаются начать работу с Gatsby. Что они должны проверять? С чего им начать это исправлять? Кажется, есть 7 потенциальных вещей, которые нужно проверить…

Ответ №1:

Эта ошибка, по-видимому, вызвана множеством факторов. В моем случае это был порядок в gatsby-config.js . Мне пришлось переместить gatsby-plugin-sharp, gatsby-transformer-sharp и gatsby-transformer-remark над моими плагинами файловой системы.

Для многих других (если вы просматриваете те проблемы, о которых я упоминал):

  1. проверьте орфографию
  2. убедитесь, что у вас есть правильные плагины (точка)
  3. проверьте порядок плагинов
  4. используйте graphiql, чтобы узнать, получаете ли вы строку для изображений по сравнению с фактическим узлом (вы можете использовать трансформаторы на узле, но не строку)
  5. удалите модули .cache и node и переустановите

удачи, вы никогда не получите эти 12 часов своей жизни обратно.

Комментарии:

1. В моем случае этот код был пропущен из gatsby-node.js exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions fmImagesToRelative(node) // convert image paths for gatsby images if (node.internal.type === MarkdownRemark ) { const value = createFilePath({ node, getNode }) createNodeField({ name: slug , node, value, }) } } После добавления этого кода больше нет ошибки поля «изображение» не должно иметь выделения, поскольку тип «Строка» не имеет вложенных полей.

2. @ZeeshanSafdar Большое вам спасибо! Но я хотел бы отметить, что сначала мы должны установить gatsby-remark-relative-images .

Ответ №2:

Чтобы добавить в контрольный список при обнаружении этой ошибки:

Убедитесь, что у вас действительно есть изображения в папке, настроенной в gatsby-conf.js:

 {
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
}
 

и что они соответствуют любому пути в вашем graphql. Если ваш запрос возвращает «myImage.png», но это не файл в ваших изображениях, вы получите эту ошибку.