As a personal project I am working on a VueJS storefront with a shopify backend. I am working with Shopify's storefront API but I am fairly new to GraphQL so that has been a major pain as most of my time has been using REST. I do like the flexibility of it but I am struggling with this one aspect of my query. I am working on my single product page and I am trying to get my variations but also the variations they they belong too. In the title attribute it returns the variation values deliminated by slashes but there is no information which value belongs to which parent variation. My query so far: query GetProductsById($id: ID!) { product(id: $id) { id title metafield (key: "custom.additional_variation_images", namespace: "product_page") { value id } vendor publishedAt handle variants(first: 100) { nodes { id title price { amount } image { url altText width height } } } } } Ultimately for printing out on the screen I need the parent variations for a product so I can create my select boxes and then I need to be able to find that combination to determine the pricing. My data structure I was hoping to use to fill out my product detail page would look like this: let product = { title: 'Awesome Hoodie', variations : [{ id: '1', name: 'Color', values: [{ id: '1', name: 'Red' }, { id: '2', name: 'Blue' }, { id: '2', name: 'Blue' }] },{ id: '2', name: 'Size', values: [{ id: '3', name: 'Small' }, { id: '4', name: 'Medium' }, { id: '5', name: 'Large' }] }] } I also was hoping to add quantity available for the productas well but did not see that in any of the graphql samples ive been using. Even the custom product metafields I was trying to return where I store additional image URLs for each color is showing null on the response. So my query is all messed up to get to this final data structure.