from v1 to v3

pages/index.vue

@@ -20,12 +20,12 @@
 
       <div class="card__variation">
         <div
-          v-for="variation in productsData?.variations"
+          v-for="variation in productsVariationsData"
           :key="variation?.id"
           @click="() => currentVariantId = variation?.id"
         >
           {{ variation?.id }}
-          <img width="200px" :src="variation?.image[0]?.src" :alt="variation?.image[0]?.src">
+          <img width="200px" :src="variation?.image?.src">
         </div>
       </div>
 
@@ -37,9 +37,11 @@
 </template>
 
 <script setup lang="ts">
-import { useGetProductsDetail } from '~/api/queries'
+import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
 
+// Вынести все computed в composable useProduct.ts
 const { data: productsData } = useGetProductsDetail(79)
+const { data: productsVariationsData } = useGetProductsVariationsList(79)
 
 function getAttribute(attributes, name: string) {
   return attributes?.find(attribute => attribute?.name === name)?.option
@@ -49,13 +51,13 @@ const defaultColor = computed(() => getAttribute(productsData?.value?.default_at
 const defaultMaterial = computed(() => getAttribute(productsData?.value?.default_attributes, 'material'))
 
 const defaultVariant = computed(() => {
-  return productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'color') === defaultColor?.value)
-    && productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'material') === defaultMaterial?.value)
+  return productsVariationsData?.value?.find(variation => getAttribute(variation?.attributes, 'color') === defaultColor?.value)
+    && productsVariationsData?.value?.find(variation => getAttribute(variation?.attributes, 'material') === defaultMaterial?.value)
 })
 
 const currentVariantId = ref(defaultVariant?.value?.id)
 
-const currentVariant = computed(() => productsData?.value?.variations?.find(variation => variation?.id === currentVariantId?.value))
+const currentVariant = computed(() => productsVariationsData?.value?.find(variation => variation?.id === currentVariantId?.value))
 
 const currentColor = computed(() => getAttribute(currentVariant?.value?.attributes, 'color'))
 const currentMaterial = computed(() => getAttribute(currentVariant?.value?.attributes, 'material'))