Gatsby graphiQL - Невозможно вернуть значение NULL для поля ImageSharpFluid.src, не допускающего значения NULL.

Я использую Gatsby и graphql с безголовым WordPress для веб-сайта.

Я хочу использовать плагин gatsby-image, чтобы получить srcSet и эффект размытия для изображений, поступающих из WordPress, но он выдает ошибку на игровой площадке graphiQL. Я хочу объяснить ниже весь процесс шаг за шагом для лучшего понимания.

Плагин gatsby-image имеет фиксированные и плавные два типа адаптивных изображений:

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

Итак, мне нужен второй - жидкость.

Он также имеет два компонента изображения Статический и динамический.

Если вы используете изображение, которое будет одинаковым каждый раз при использовании компонента, например логотип или главное изображение первой страницы, вы можете использовать компонент StaticImage.

Если вам нужны динамические изображения (например, если они поступают из CMS), вы можете загрузить их через GraphQL и отобразить их с помощью компонента GatsbyImage.

Я использую WordPress (это CMS). Итак, мне нужен второй - Динамический

Прежде чем писать запрос, я должен увидеть, как сделать правильный запрос для файлов, поступающих из схемы WordPress.

По этой причине я обнаружил, что у Гэтсби есть gatsby-source-wordpress плагин для извлечения изображений из WordPress.

Я установил и настроил все необходимые пакеты, такие как _1 _, _ 2_, gatsby-transformer-sharp и т. Д. Я сделал все так же точно, как сказано в официальной документации.

В то время все было подготовлено для запроса, поэтому я пробую первый пример, который есть в документации - извлечение изображений из wordpress, и ЭТО РАБОТАЕТ.

введите описание изображения здесь

Итак, пришло время НАКОНЕЦ ПОЛУЧИТЬ ТО, ЧТО Я ХОТЕЛ, и попробовать второй пример (жидкость), но ЭТО НЕ УДАЛОСЬ с сообщением об ошибке Cannot return null for non-nullable field ImageSharpFluid.srcSet.

введите описание изображения здесь

Он также НЕУДАЕТ, когда я пытаюсь получить gatsbyImageData

введите описание изображения здесь

Как я мог решить эту проблему?

Заранее спасибо.


gatsby graphql gatsby-image graphiql wp-graphql
person Daniel Barbakadze    schedule 05.04.2021    source источник
comment
'# В проводнике GraphQL используйте имена # полей, например src. В коде вашего сайта удалите их # и используйте фрагменты, предоставленные Гэтсби. src '   -  person xadm    schedule 05.04.2021
comment
тот же результат для фрагментов   -  person Daniel Barbakadze    schedule 06.04.2021
comment
уведомления / комментарии касаются использования реквизитов изображений ... они больше не являются общедоступными / строго определенными ... не должны тестироваться на игровой площадке ... используйте компонент изображения или console.log() его на странице / шаблоне, чтобы увидеть реквизиты   -  person xadm    schedule 06.04.2021
comment
та же ошибка в консоли   -  person Daniel Barbakadze    schedule 06.04.2021
comment
запрос с фрагментами, localFile зарегистрирован? все аннулированы / какие-то реквизиты? ... ошибки в журналах сборки? что в реквизитах компонентов или запросах, связанных с данными?   -  person xadm    schedule 06.04.2021

Ответы (2)


arrow_upward
1
arrow_downward

Упомянутая вами документация для gatsby-source-wordpress устарела. Проверить это: https://www.gatsbyjs.com/plugins/gatsby-source-wordpress/

Ваш запрос похож на старый. Я не уверен, какие версии плагинов вы используете, но если вы используете последние версии, ваш запрос должен выглядеть примерно так:

query MyQuery {
  allWpPost {
    nodes {
      featuredImage {
        node {
          localFile {
            childrenImageSharp {
              gatsbyImageData(width: 200, placeholder: BLURRED, formats: [AVIF, WEBP, JPG])
            }
          }
        }
      }
    }
  }
}

Кроме того, плагин gatsby-image устарел и заменен на gatsby-plugin-image.

Если вам нужен пример того, как собрана установка, вы можете поискать в стартерах CMS:WordPress и v3, чтобы найти тот, с которого можно начать. Gatsby Starters

Надеюсь, это поможет вам :)

person Henrik W.    schedule 25.05.2021

arrow_upward
1
arrow_downward

Если вы использовали кеширование в параметрах плагина, как в приведенном ниже коде, Попробуйте удалить папку .cache в своей рабочей области и перезапустите сервер.

{
  resolve: `gatsby-source-wordpress`,
  options: {
    production: {
      hardCacheMediaFiles: true,
    },
  },
},

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

person nagarjuna    schedule 22.06.2021