Gatsby GraphQL 一次下载多个图像

Question

这个查询

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 查询由 the gatsby-source-plugin 生成。有什么想法吗？

Answer 1

So my issue is that I do not know how a user can download all the images by clicking on a link.

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

我会做类似的事情：

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

然后，在你的函数中：

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

修改自：

How can I let a user download multiple files when a button is clicked?
How to make a link open multiple pages when clicked

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

考虑到您的用例，我认为使用一键式功能下载所有项目是更直观的方法。

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

let newWindow=window.open(...)

然后：

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

Gatsby GraphQL 一次下载多个图像

Gatsby GraphQL download multiple images at once

javascript

reactjs

graphql

gatsby