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

Question

我正在使用 graphql 使用 Shopify API，我们的任务是实现 srcset 图像以加快页面加载时间，但是我在生成将拉取多个大小网址的查询时遇到问题。

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，但是如果我执行类似于下面的操作（我希望生成 360px 图像和 720px 图像的 url，那么我会收到错误 "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})