Shopify - Fetch all the images of Product Variant - GraphQl

Question

I am Building A Headless App Using Shopify as Backend and Nodejs as Frontend

Using Shopify App Store - Variant image penguin , I have added multiple images to variant.

Can anyone please let me know how to fetch all images of a Product variants through GraphQL

Thanks in Advance

Answer 1

 Usually variant has only one image so this is how to fetch it:   
 {
      products(first: 20) {
        edges {
          node {
            variants(first: 5) {
              edges {
                node {
                  image {
                    id
                    originalSrc
                  }
                }
              }
            }
            id
            title
          }
        }
      }
    }

However, if an app lets you use more than one which means they can use one of the following methods:

1. Merge the multiple images to one image - so if you download this image you will see all images inside of it
2. Use the liquide API and inject the src's into your html - so the graphQL dont have this info unless you use the graphQL to fetch the html injected (Im not sure it is possible) but anyway it is more complicated and risky to you because every template has different html

if you want a full nodeJS example:

const query = `{
  products(first: 20) {
    edges {
      node {
        variants(first: 5) {
          edges {
            node {
              image {
                id
                originalSrc
              }
            }
          }
        }
        id
        title
      }
    }
  }
}`
  const response = await axios({
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Access-Token": store.accessToken
    },
    method: "post",
    data: {
      query
    },
    url: `https://${store.domain}/admin/api/2020-07/graphql.json`
  });