时间戳

首页 > 解决方案 > Gatsby GraphQL 一次下载多个图像

javascript - Gatsby GraphQL 一次下载多个图像

问题描述

这个查询

query MyQuery {
  allStrapiLogos {
    nodes {
      id
      Image {
        localFile {
          publicURL
        }
      }
    }
  }
}

提供以下结果：

{
  "data": {
    "allStrapiLogos": {
      "nodes": [
        {
          "id": "Logos_1",
          "Image": [
            {
              "localFile": {
                "publicURL": "someUrl.png"
              }
            },
            {
              "localFile": {
                "publicURL": "someUrl.png"
              }
            }
          ]
        },
        {
          "id": "Logos_2",
          "Image": [
            {
              "localFile": {
                "publicURL": "/someUrl.png"
              }
            }
          ]
        },
        {
          "id": "Logos_3",
          "Image": [
            {
              "localFile": {
                "publicURL": "someUrl.svg"
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {}
}

通常，我所做的事情是这样的：

  <Link to={publicURL}>
          <ReactSVG wrapper="span" src={svgIcons.download} style={{ paddingRight: '16px' }} />
        </Link>

这总是适用于 1 个文件。我不确定处理一次下载多个图像的最佳方法是什么。
GraphQL 查询由gatsby-source-plugin生成。有任何想法吗？

标签： javascriptreactjsgraphqlgatsby

解决方案

所以我的问题是我不知道用户如何通过单击链接下载所有图像。

鉴于这种情况，我建议避免使用该Link组件，因为它不符合您的要求。

我会做类似的事情：

  <button onClick={downloadAllItems}>Download</button>

然后，在您的函数中：

  const downloadAllItems=()=>{
    data.allStrapiLogos.nodes.forEach(node=> window.open(`/yoursite.com/${node.Image.localFile.publicUrl}`))
  }

修改自：

如果按钮位于表单内，则在循环之前添加一个event.preventDefault循环以避免在需要时发出不需要的请求。

鉴于您的用例，我认为是通过一键功能下载所有项目的更直观的方法。

window.open您可以通过设置并保存内存引用并在回调中设置位置来绕过浏览器（或广告块）的限制：

let newWindow=window.open(...)

然后：

newWindow.location=`/yoursite.com/${node.Image.localFile.publicUrl}`

推荐阅读