product-card

api/endpoints/getProductAttributesDetail.ts

@@ -0,0 +1,4 @@
+import api from '~/api/instance'
+
+export const getProductAttributesDetail = async (productId: number) =>
+  await api.wc.v3ProductsAttributesDetail(productId)

api/endpoints/getProductsVariationsList.ts

@@ -1,4 +1,4 @@
 import api from '~/api/instance'
 
 export const getProductsVariationsList = async (productId: number) =>
-  await api.wc.v3ProductsVariationsList(productId)
+  await api.wc.v3ProductsVariationsList(productId, { per_page: 99 })

api/endpoints/index.ts

@@ -1,3 +1,4 @@
+export * from './getProductAttributesDetail'
 export * from './getProductsDetail'
 export * from './getProductsList'
 export * from './getProductsVariationsList'

api/queries/index.ts

@@ -1,3 +1,4 @@
+export * from './useGetProductAttributesDetail'
 export * from './useGetProductsDetail'
 export * from './useGetProductsList'
 export * from './useGetProductsVariationsList'

api/queries/useGetProductAttributesDetail.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import { getProductAttributesDetail } from '~/api/endpoints'
+
+export const useGetProductAttributesDetail = (productId: MaybeRef<number>) => {
+  return useQuery({
+    queryKey: ['get-products-detail', productId],
+    queryFn: () => getProductAttributesDetail(unref(productId)),
+  })
+}