Shopify API GraphQL 在单个请求中获取多个图像缩略图

Question

我正在使用 graphql 与 Shopify API 合作，我们的任务是实施 srcset 图像以加快页面加载时间，但是我在生成将拉取多个尺寸的查询时遇到了问题urls.

query ($tag: String!) {
  products(first: 10, query: $tag) {
    edges {
      cursor
      node {
        id
        tags
        handle
        images(first:1, maxWidth:360) {
          edges {
            node {
              src
              __typename
            }
            __typename
          }
          __typename
        }
      }
      __typename
    }
    __typename
  }
}

此查询可以拉取最大宽度为 360px 的单个图像 url，但是如果我执行类似于下面的操作（我希望生成一个 url 360px 图片和 720px 图片，然后我得到错误 "message": "Field 'images' has an argument conflict: {first:\"1\",maxWidth:\"360\"} or {first:\"1\",maxWidth:\"720\"}?",

query ($tag: String!) {
  products(first: 10, query: $tag) {
    edges {
      cursor
      node {
        id
        tags
        handle
        images(first:1, maxWidth:360) {
          edges {
            node {
              src
              __typename
            }
            __typename
          }
          __typename
        }
        images(first:1, maxWidth:720) {
          edges {
            node {
              src
              __typename
            }
            __typename
          }
          __typename
        }
      }
      __typename
    }
    __typename
  }
}

关于如何构造我的查询以便它提取两个不同大小的缩略图的任何建议？

谢谢！

Answer 1

如@xadm 所述，您可以使用别名：

        small_image: images(first:1, maxWidth:360) {
          edges {
            node {
              src
            }
          }
        }
        large_image: images(first:1, maxWidth:720) {
          edges {
            node {
              src
            }
          }
        }

您只需在您选择的 images 调用之前添加一些名称。

但是您的方法已弃用，您应该改用transformedSrc。

所以会变成：

        images(first:1) {
          edges {
            node {
              originalSrc
              large: transformedSrc(maxWidth: 720)
              small: transformedSrc(maxWidth: 360)
            }
          }
        }

Answer 2

正确...但请注意，自 2022 年 3 月起，已弃用 transformedSrc，取而代之的是 url。因此，第一个有效但不推荐使用第二个：

        smallA: transformedSrc(maxWidth: 64)

        smallB: url(transform: {maxWidth: 64})

Shopify API GraphQL 在单个请求中获取多个图像缩略图

Shopify API GraphQL get multiple image thumbnails in single request

shopify

graphql

axios