From fa7f1c5fc83e4df13d00f344e960eaa963f6667d Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Mon, 30 Jun 2025 04:04:50 +0200
Subject: [PATCH] Refactor to follow best practices

---
 components/Products/ProductsShowAll.vue | 31 ++++---------------------
 pages/category/[category].vue           |  9 +++----
 pages/index.vue                         |  7 +++++-
 pages/products.vue                      |  7 +++++-
 4 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/components/Products/ProductsShowAll.vue b/components/Products/ProductsShowAll.vue
index b916c7cd..7cc45598 100644
--- a/components/Products/ProductsShowAll.vue
+++ b/components/Products/ProductsShowAll.vue
@@ -24,25 +24,16 @@
 </template>
 
 <script setup>
-import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
-import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
-
 import ProductImage from "@/components/Products/ProductImage.vue";
 import ProductPrice from "@/components/Products/ProductPrice.vue";
 
-const props = defineProps({
-  categoryId: { type: String, required: false },
-  categorySlug: { type: String, required: false },
-});
-
 const config = useRuntimeConfig();
 
-const products = computed(() => {
-  return (
-    allCategoryProducts.value?.productCategory?.products?.nodes ||
-    allProducts.value?.products?.nodes ||
-    []
-  );
+const props = defineProps({
+  products: {
+    type: Array,
+    required: true,
+  },
 });
 
 /**
@@ -68,18 +59,6 @@ const productLink = (product) => {
  */
 const productImage = (product) =>
   product.image ? product.image.sourceUrl : config.public.placeholderImage;
-
-const productVariables = { limit: 99 };
-const { data: allProducts } = await useAsyncQuery(
-  FETCH_ALL_PRODUCTS_QUERY,
-  productVariables,
-);
-
-const categoryVariables = { id: props.categoryId };
-const { data: allCategoryProducts } = await useAsyncQuery(
-  GET_PRODUCTS_FROM_CATEGORY_QUERY,
-  categoryVariables,
-);
 </script>
 
 <style scoped>
diff --git a/pages/category/[category].vue b/pages/category/[category].vue
index bae634d8..30fece3f 100644
--- a/pages/category/[category].vue
+++ b/pages/category/[category].vue
@@ -1,13 +1,14 @@
 <template>
-  <ProductsShowAll
-    :category-id="route.query.id"
-    :category-slug="route.params.product"
-  />
+  <ProductsShowAll :products="products" />
 </template>
 
 <script setup>
+import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
 const route = useRoute();
 
+const { data } = await useAsyncQuery(GET_PRODUCTS_FROM_CATEGORY_QUERY, { id: route.query.id });
+const products = computed(() => data.value?.productCategory?.products?.nodes || []);
+
 useHead({
   title: route.params.category,
   titleTemplate: "%s - Nuxt 3 Woocommerce",
diff --git a/pages/index.vue b/pages/index.vue
index 072a6c53..d4e0c03e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,16 @@
 <template>
   <div>
     <IndexHero />
-    <ProductsShowAll />
+    <ProductsShowAll :products="products" />
   </div>
 </template>
 
 <script setup>
+import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
+
+const { data } = await useAsyncQuery(FETCH_ALL_PRODUCTS_QUERY);
+const products = computed(() => data.value?.products?.nodes || []);
+
 useHead({
   title: "Index",
   titleTemplate: "%s - Nuxt 3 Woocommerce",
diff --git a/pages/products.vue b/pages/products.vue
index 5d1dafdc..b5af261e 100644
--- a/pages/products.vue
+++ b/pages/products.vue
@@ -1,8 +1,13 @@
 <template>
-  <ProductsShowAll />
+  <ProductsShowAll :products="products" />
 </template>
 
 <script setup>
+import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
+
+const { data } = await useAsyncQuery(FETCH_ALL_PRODUCTS_QUERY);
+const products = computed(() => data.value?.products?.nodes || []);
+
 useHead({
   title: "Products",
   titleTemplate: "%s - Nuxt 3 Woocommerce",