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

【问题标题】：Shopify API GraphQL get multiple image thumbnails in single requestShopify API GraphQL 在单个请求中获取多个图像缩略图
【发布时间】：2021-02-17 10:12:54
【问题描述】：

我正在使用 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
  }
}

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

谢谢！

【问题讨论】：

使用别名，阅读文档

标签： axios graphql shopify

【解决方案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)
            }
          }
        }

【讨论】：

【解决方案2】：

正确...但请注意，从 2022 年 3 月起，transformSrc 已被弃用，取而代之的是 url。因此，第一个有效，但不赞成使用第二个：

        smallA: transformedSrc(maxWidth: 64)

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

【讨论】：