Refactor code

Author: w3bdesign

components/Category/CategoryShowProducts.vue

@@ -55,15 +55,33 @@
 
 <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 { filteredVariantPrice } from "@/utils/functions";
 
+const props = defineProps({
+  categoryId: { type: String, required: false },
+  categorySlug: { type: String, required: false },
+});
+
 const config = useRuntimeConfig();
 
 const productImage = (product) =>
   product.image ? product.image.sourceUrl : config.placeholderImage;
 
-const variables = { limit: 99 };
-const { data } = await useAsyncQuery(FETCH_ALL_PRODUCTS_QUERY, variables);
+const productVariables = { limit: 99 };
+const { data } = await useAsyncQuery(
+  FETCH_ALL_PRODUCTS_QUERY,
+  productVariables
+);
+
+if (props.id) {
+  const categoryVariables = { id: props.categoryId, slug: props.categorySlug };
+  const { data } = await useAsyncQuery(
+    GET_PRODUCTS_FROM_CATEGORY_QUERY,
+    categoryVariables
+  );
+}
 </script>
 
 <style scoped>

components/Products/ProductsShowAll.vue

@@ -1,23 +1,13 @@
 <template>
-  <div v-if="data?.productCategory">
-    <CategoryShowProducts :products="data.productCategory" />
-  </div>
-  <div v-else>
-    <SpinnerLoading />
-  </div>
+  <ProductsShowAll
+    :category-id="route.query.id"
+    :category-slug="route.params.product"
+  />
 </template>
 
 <script setup>
-import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
-
 const route = useRoute();
 
-const variables = { id: route.query.id, slug: route.params.category };
-const { data } = await useAsyncQuery(
-  GET_PRODUCTS_FROM_CATEGORY_QUERY,
-  variables
-);
-
 useHead({
   title: route.params.category,
   titleTemplate: "%s - Nuxt 3 Woocommerce",