Fix pagination problem

frontend/components/products/FilterProducts.vue

@@ -24,7 +24,7 @@ const currentCategory = computed({
         router.push({
             name: "products-slug",
             params: { slug: ["category", newValue] },
-            query: { ...route.query },
+            query: { ...route.query, page: "1" },
         });
     },
 });

frontend/composables/api/products/useGetProducts.ts

@@ -34,7 +34,6 @@ const useGetProducts = () => {
             sort,
             in_stock,
             has_discount,
-            slug,
             price_gte,
             price_lte,
         };
@@ -45,24 +44,11 @@ const useGetProducts = () => {
     watch(
         () => filters_clone.value,
         () => {
-            queryClient.cancelQueries({
-                queryKey: [
-                    QUERY_KEYS.products,
-                    searchDebounced,
-                    sort,
-                    in_stock,
-                    has_discount,
-                    products_category,
-                    price_gte,
-                    price_lte,
-                    page,
-                ],
-            });
             page.value = 1;
         },
         {
             deep: true,
-        }
+        },
     );
 
     // methods

frontend/composables/global/useAppParams.ts

@@ -15,13 +15,12 @@ export const useAppParams = () => {
         mode: "replace",
     });
 
-    const page = useRouteQuery<number | undefined>("page", 1, {
+    const page = useRouteQuery("page", "1", {
         mode: "push",
-        transform: (value) => (!!value ? +value : undefined),
-    });
-
-    const category = useRouteQuery<string | undefined>("category", "", {
-        mode: "replace",
+        transform: {
+            get: (v) => Number(v),
+            set: (v: number) => String(v),
+        },
     });
 
     const status = useRouteQuery<string | undefined>("status", undefined, {
@@ -68,7 +67,6 @@ export const useAppParams = () => {
         sort,
         search,
         page,
-        category,
         price_gte,
         price_lte,
         in_stock,

frontend/pages/products/[...slug].vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+
+// import
+
+import { useAppParams } from "~/composables/global/useAppParams";
+import useGetProducts from "~/composables/api/products/useGetProducts";
+
 // meta
 
 definePageMeta({
@@ -11,11 +17,6 @@ definePageMeta({
     },
 });
 
-// import
-
-import { useAppParams } from "~/composables/global/useAppParams";
-import useGetProducts from "~/composables/api/products/useGetProducts";
-
 // state
 
 const { search } = useAppParams();