Refactor categories

Author: w3bdesign

components/Category/CategoryShowAll.vue

@@ -1,10 +1,10 @@
 <template>
-  <div v-if="categories">
+  <div v-if="data.productCategories">
     <section class="mx-auto bg-white">
       <div
         class="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3"
       >
-        <template v-for="nodes in categories">
+        <template v-for="nodes in data.productCategories">
           <template v-for="category in nodes">
             <div v-if="category.slug !== undefined" :key="category.id">
               <NuxtLink
@@ -33,10 +33,8 @@
 </template>
 
 <script setup>
-defineProps({
-  categories: {
-    type: [Object],
-    required: true,
-  },
-});
+import FETCH_ALL_CATEGORIES_QUERY from "@/apollo/queries/FETCH_ALL_CATEGORIES_QUERY.gql";
+
+const variables = { limit: 99 };
+const { data } = await useAsyncQuery(FETCH_ALL_CATEGORIES_QUERY, variables);
 </script>

pages/categories.vue

@@ -1,18 +1,8 @@
 <template>
-  <div v-if="data.productCategories">
-    <CategoryShowAll :categories="data.productCategories" />
-  </div>
-  <div v-else>
-    <SpinnerLoading />
-  </div>
+  <CategoryShowAll />
 </template>
 
 <script setup>
-import FETCH_ALL_CATEGORIES_QUERY from "@/apollo/queries/FETCH_ALL_CATEGORIES_QUERY.gql";
-
-const variables = { limit: 5 };
-const { data } = await useAsyncQuery(FETCH_ALL_CATEGORIES_QUERY, variables);
-
 useHead({
   title: "Categories",
   titleTemplate: "%s - Nuxt 3 Woocommerce",