Блог

Я работаю над оптимизацией изображений для сайта с использованием Gatsby и Kentico Cloud. Я хочу использовать gatsby-image плагин, но gatsby-image не могу запрашивать поля URL. Итак, мне нужно загрузить эти изображения из CMS на другом узле, чтобы их можно было запросить gatsby-image .

Я пытался реализовать это с помощью другого плагина, gatsby-plugin-remote-images но пока это не сработало. Я не уверен, что неправильно понимаю документацию.

Вот мой последний код из gatsby-config

 {
  resolve: `gatsby-plugin-remote-images`,
  options: {
    nodeType: 'kenticoCloudItemAbout',
    imagePath: 'data.kenticoCloudItemAbout.elements.main_image.value[0].url'
  }
}

  

Я понимаю, что теперь я должен иметь возможность запрашивать localImage (после перезапуска сервера) из GraphiQL и видеть путь к загруженному файлу, но, похоже, это не работает.

Спасибо!

Будучи новичком в GatsbyJS, я тоже боролся с этим, прежде чем заставить его работать. Во-первых, я не думаю, что ваша конфигурация ImagePath должна включать data. переменную, используемую в компонентах для возврата результатов GraphQL. Начните с kenticoCloudItemAbout . Если это не сработает, я обнаружил, что вложенный путь к изображению был проблематичным. (Либо я еще не понимаю, как правильно использовать ImagePath, либо подключаемому модулю не нравится вложенная структура.) Например, мой запрос GraphQL / структура данных выглядит следующим образом:

   {
  allMyNodes{
    edges {
      node {
            levelOneField
            subItem {
              levelTwoField
              subSubItem {
                imageURL
              }
            }
          }
        }
      }
    }
  

Когда я использовал { nodeType="myNodes", imagePath="myNodes.edges.node.subitem.subsubitem.imageURL"} , мне не повезло заставить плагин работать. Однако, когда я указал непосредственно на узел с моим ImageUrl, как { nodeType="subSubItem", imagePath="imageURL"} , это сработало. Кроме того, следите за ошибками в терминале при сборке gatsby develop . Ошибки, такие как ImageUrl, не указывающие на файл (неработающая ссылка), вызвали проблемы. Наконец, убедитесь, что вы не включаете фрагменты GraphQL (например, ...GatsbyImageSharpFluid ) в свое окно GraphiQL. В GraphiQL попробуйте ссылаться только на localImage свойства объекта, чтобы проверить, работает ли плагин для вас. Например:

 {
    allSubSubItem {
      imageURL
      localImage {
         id
      }
    }
 }
  

Вероятно, вы уже нашли решение.

Если нет, я смог заставить удаленные изображения работать с gatsby-image. Я тоже пытался gatsby-plugin-remote-images , но не смог заставить его работать. Что для меня помогло, так это создать распознаватель для моего удаленного API (мой удаленный источник cms в gatsby-source-graphql , я использую Webiny CMS) вот так:

В gatsby-config.js :

 plugins: [
       {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'images',
            path: '${__dirname}/src/images',
        },
         },
    {
        resolve: 'gatsby-source-graphql',
        options: {
          typeName: "Webiny",
          fieldName: "webinyHeadlessCms",
          url: "https://XXXXXXXXXXX.cloudfront.net/cms/read/production",
          headers: {
            authorization: "XXXXXXXXXXXXXXXXXXXX"
          },
          refetchInterval: 60,
        },
    },
  ],
  

И мой gatsby-node.js :

 const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

exports.createResolvers = ({actions,cache,createNodeId,createResolvers,store,reporter,}) => {
    const { createNode } = actions
    createResolvers({
        Webiny_BlogPost: {
            imageFile: {
                type: `File`,
                resolve(source, args, context, info) {
                    return createRemoteFileNode({
                        url: source.headerImage,
                        store,
                        cache,
                        createNode,
                        createNodeId,
                        reporter,
                    })
                },
            },
        },
    })
}
  

Теперь я могу запрашивать изображения для использования с gatsby-image вот так:

 export const query = graphql`{
    webinyHeadlessCms {
        listBlogPosts {
            data {
                headerImage
                imageFile {
                    childImageSharp {
                        fluid (quality: 100, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                        }
                    }
                }
            }
        }
    }
}`
  

Важно действительно понимать схему GraphQL вашего удаленного API. Посмотрите на это в GraphiQL. В моем случае распознаватель создает новый узел с именем imageFile at Webiny_BlogPost . В общем, это должно быть сделано в typeName_SchemaSubType , где часть перед подчеркиванием является вашей, typeName определенной в gatsby-source-graphql , а часть после подчеркивания — это подтип схемы в этом источнике, в котором вы хотите создать свой узел изображения (файла).
Когда вы запрашиваете его, имейте в виду, что вам также нужно запросить узел с URL удаленного изображения (в моем случае headerImage ), чтобы заставить его работать.