финишный вариант интерцептора

api/endpoints/getProductList.ts

@@ -1,4 +0,0 @@
-import api from '~/api/instance'
-
-export const getProductList = () =>
-  api.wc.v3ProductsList()

api/endpoints/getProductsDetail.ts

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

api/endpoints/index.ts

@@ -1 +1 @@
-export * from './getProductList'
+export * from './getProductsDetail'

api/instance.ts

@@ -3,37 +3,75 @@ import { Api } from '~/api/Api'
 const requestUrl = 'https://wp.koptilnya.xyz/wp-json'
 const consumerKey = 'ck_8b5477a1573ce6038ef1367f25d95cede1de4559'
 const consumerSecret = 'cs_d0ccaa93e8efe4f76eef0b70c9828a58fc53459f'
+
 const authString = `${consumerKey}:${consumerSecret}`
 const encodedAuth = btoa(unescape(encodeURIComponent(authString)))
 
+// Создаем инстанс API
 const api = new Api({
-  baseUrl: String(requestUrl),
+  baseUrl: requestUrl,
+  securityWorker: (securityData) => {
+    return {
+      headers: {
+        'Authorization': `Basic ${encodedAuth}`,
+        'Content-Type': 'application/json',
+      },
+    }
+  },
 })
 
-Object.keys(api.wc).forEach((methodName) => {
-  const nativeMethod = api.wc[methodName] as typeof Function
-  const argsNumber = nativeMethod.length
-  api.wc[methodName] = function (...args) {
-    let params: Record<string, unknown> = {}
-    if (args.length > argsNumber) {
-      params = args.pop()
-    }
+// Модифицируем методы API
+Object.keys(api.wc).forEach((namespace) => {
+  const namespaceObj = api.wc[namespace]
 
-    return nativeMethod(...args, {
-      ...params,
+  Object.keys(namespaceObj).forEach((methodName) => {
+    const originalMethod = namespaceObj[methodName]
+
+    namespaceObj[methodName] = async function (...args: any[]) {
+      try {
+        // Добавляем заголовки аутентификации
+        const lastArg = args[args.length - 1]
+        const options = typeof lastArg === 'object' ? lastArg : {}
+
+        const modifiedOptions = {
+          ...options,
           headers: {
-        ...(params.headers as Record<string, string> ?? {}),
+            ...(options.headers || {}),
             Authorization: `Basic ${encodedAuth}`,
           },
-    } as unknown as string)
         }
+
+        const modifiedArgs = typeof lastArg === 'object'
+          ? [...args.slice(0, -1), modifiedOptions]
+          : [...args, modifiedOptions]
+
+        const response = await originalMethod.apply(this, modifiedArgs)
+
+        // Получаем тело ответа и парсим JSON
+        const data = await response.json()
+        return data
+      }
+      catch (error) {
+        console.error(`API Error in ${namespace}.${methodName}:`, error)
+        throw error
+      }
+    }
+  })
 })
 
+// Переопределяем базовый request
 const nativeRequest = api.request
 
 api.request = async function (...args) {
+  try {
     const response = await nativeRequest.call(api, ...args)
-  return await response.json()
+    const data = await response.json()
+    return data
+  }
+  catch (error) {
+    console.error('API Request Error:', error)
+    throw error
+  }
 }
 
 export default api

api/queries/index.ts

@@ -1 +1 @@
-export * from './useGetProductList'
+export * from './useGetProductsDetail'

api/queries/useGetProductList.ts

@@ -1,9 +0,0 @@
-import { useQuery } from '@tanstack/vue-query'
-import { getProductList } from '~/api/endpoints'
-
-export const useGetProductList = () => {
-  return useQuery({
-    queryKey: ['get-product-list'],
-    queryFn: () => getProductList(),
-  })
-}

api/queries/useGetProductsDetail.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/vue-query'
+import { unref, watch } from 'vue'
+import { getProductsDetail } from '~/api/endpoints'
+
+export const useGetProductsDetail = (productId: MaybeRef<number>) => {
+  const q = useQuery({
+    queryKey: ['get-products-detail', unref(productId)],
+    queryFn: () => getProductsDetail(unref(productId)),
+  })
+
+  watch(() => productId, () => q.refetch())
+
+  return q
+}

api/useGetProduct.ts

@@ -1,14 +0,0 @@
-import { useAsyncData } from '#app'
-
-export function useGetProducts() {
-  return useAsyncData(
-    'products',
-    async () => {
-      const response = await $fetch('https://wp.koptilnya.xyz/wp-json/wp/v2/product')
-      return response
-    },
-    {
-      server: false,
-    },
-  )
-}

pages/index.vue

@@ -1,14 +1,20 @@
 <template>
   <div>
-    productsData
     <pre>
-    {{ productsData }}
+    {{ productsData?.images?.filter(img => img?.src?.includes(colorVariants.blackCottonPolyester)) }}
     </pre>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useGetProductList } from '~/api/queries'
+import { useGetProductsDetail } from '~/api/queries'
 
-const { data: productsData } = useGetProductList()
+const { data: productsData } = useGetProductsDetail(79)
+
+const colorVariants = {
+  beigeCottonPolyester: 'beige_cotton-polyester_',
+  blackCotton: 'black_cotton_',
+  greyCottonPolyester: 'grey_cotton-polyester_',
+  blackCottonPolyester: 'black_cotton-polyester_',
+}
 </script>