How to get correspondent variant images for react-native mobile app?

[alisonysy]

Hi there, our team has already built a mobile app using react-native and we are trying to integrate a 'shop' function into the existent app. 

I've looked into the Storefront API and JavaScript Buy SDK, and succeed in retrieving some product info from my shop. However, I have difficulties in retrieving correspondent product variant images based on which variant is selected. I can't find any Storefront API related to this (the only two APIs I can find are 'images' in Product and 'image' in ProductVariant, where the latter doesn't work, it returns nothing). 

On my shopify website, we use a shopify app called 'Variant Image Penguin' to upload and sort out the images for variants so that when users click a variant, correspondent images show up.

My question is: how can I retrieve correspondent product variant images for mobile apps? And if shopify apps are used on website to modify and process some data, can I expect they also support for mobile app use, i.e. the data I retrieved using storefront API has been processed by the shopify apps?

[Alex · Accepted solution]

I'm not entirely certain that I understand your question. Are you saying that you're not getting any information returned on product variant images when you query for them on the storefront API? As an example:

{
  products (first:25) {
    edges {
      node {
        variants(first:10) {
          edges {
            node {
              image {
                id
                originalSrc
              }
            }
          }
        }
      }
    }
  }
}

Is the above returning no variant images src's? It works alright for me. Let me know if I'm misunderstanding anything.

Cheers.