Question

我正在使用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'
  }
}

我的理解是，我现在应该能够从GraphiQL查询localImage（在重新启动服务器之后）并查看下载的文件路径，但这似乎不起作用。

谢谢！

Answer 1

作为GatsbyJS的新手，我也为此付出了很多努力。首先，我认为您的imagePath配置不应包含data.，它是组件中用于返回graphQL结果的变量。以kenticoCloudItemAbout开头。如果那行不通，我发现嵌套的imagePath有问题。（或者我还不了解imagePath的正确用法，或者插件不喜欢嵌套结构。）例如，我的GraphQL查询/数据结构是这样的：

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

使用{ nodeType="myNodes", imagePath="myNodes.edges.node.subitem.subsubitem.imageURL"}时，让插件正常工作没有任何运气。但是，当使用诸如{ nodeType="subSubItem", imagePath="imageURL"}之类的imageURL直接指向该节点时，它可以工作。另外，在构建gatsby develop时，请注意终端中的错误。诸如imageURL未指向文件（链接断开）之类的错误引起麻烦。最后，请确保您没有在GraphiQL窗口中包括GraphQL片段（例如...GatsbyImageSharpFluid）。在GraphiQL中，仅尝试引用localImage对象属性来测试该插件是否对您有用。例如：

{
    allSubSubItem {
      imageURL
      localImage {
         id
      }
    }
 }

Answer 2

您大概已经找到了解决方法。

如果没有，我可以获取远程图像以使用gatsby-image。我也尝试过gatsby-plugin-remote-images，但无法正常工作。像这样为我的工作是为我的远程API（我的gatsby-source-graphql中的远程cms源，我使用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
                        }
                    }
                }
            }
        }
    }
}`

真正了解远程API的GraphQL模式很重要。在GraphiQL中看一下。在我的情况下，解析程序在imageFile处创建一个名为Webiny_BlogPost的新节点。通常，应该在typeName_SchemaSubType进行此操作，其中下划线之前的部分是您在typeName中定义的gatsby-source-graphql，下划线之后的部分是该源中的架构子类型，您想要在其中创建图像（文件）节点。在查询时，请记住，还需要使用远程图像URL（在我的情况下为headerImage）查询节点，以使其正常工作。

如何从Gatsbyjs的另一个节点上的url字段下载图像，以便可以使用gatsby-image？

2 个答案: