api/endpoints/getProductList.ts

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

api/endpoints/getProductsDetail.ts

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

api/endpoints/index.ts

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

api/instance.ts

@@ -3,75 +3,37 @@ 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: requestUrl,
-  securityWorker: (securityData) => {
-    return {
+  baseUrl: String(requestUrl),
+})
+
+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()
+    }
+
+    return nativeMethod(...args, {
+      ...params,
       headers: {
-        'Authorization': `Basic ${encodedAuth}`,
-        'Content-Type': 'application/json',
+        ...(params.headers as Record<string, string> ?? {}),
+        Authorization: `Basic ${encodedAuth}`,
       },
-    }
-  },
+    } as unknown as string)
+  }
 })
 
-// Модифицируем методы API
-Object.keys(api.wc).forEach((namespace) => {
-  const namespaceObj = api.wc[namespace]
-
-  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: {
-            ...(options.headers || {}),
-            Authorization: `Basic ${encodedAuth}`,
-          },
-        }
-
-        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)
-    const data = await response.json()
-    return data
-  }
-  catch (error) {
-    console.error('API Request Error:', error)
-    throw error
-  }
+  const response = await nativeRequest.call(api, ...args)
+  return await response.json()
 }
 
 export default api

api/queries/index.ts

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

api/queries/useGetProductList.ts

@@ -0,0 +1,9 @@
+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

@@ -1,14 +0,0 @@
-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

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