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

Question

我正在为一个使用Gatsby和Kentico的网站进行图像优化。我想使用gatsby-image插件，但是gatsby-image不能查询url字段。因此，我需要从另一个节点上的内容管理系统下载这些图像，以便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，但是不能让它工作。我的工作是为我的远程应用编程接口(我的远程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中查看它。在我的例子中，解析器在Webiny_BlogPost上创建了一个名为imageFile的新节点。通常，这应该在typeName_SchemaSubType中完成，其中下划线之前的部分是在gatsby-source-graphql中定义的typeName，下划线之后的部分是该源中的架构子类型，您希望在其中创建图像(文件)节点。当您查询它时，请记住，您还需要查询具有远程图像url的节点(在我的例子中是headerImage)才能使其工作。