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

Question

我正在使用 graphql 处理 Shopify API，我们的任务是实现 srcset 图像以加快页面加载时间，但是我无法生成会拉取多个大小 URL 的查询。

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)
            }
          }
        }