Client Page to useClient composable

Author: diazdesandi

02-piniaApp/src/clients/composables/useClient.ts

@@ -1,17 +1,48 @@
 import clientsApi from "@/api/clients-api";
 import type { Client } from "@/clients/interfaces/client";
-import { useQuery } from "@tanstack/vue-query";
-import { ref, watch } from "vue";
+import { useMutation, useQuery } from "@tanstack/vue-query";
+import { computed, ref, watch } from "vue";
 
 const getClient = async (id: number) => {
   const { data } = await clientsApi.get<Client>(`/clients/${id}`);
   return data;
 };
 
+// Actualizando cliente
+const updateClient = async (client: Client): Promise<Client> => {
+  // await new Promise((resolve) => {
+  //   setTimeout(() => resolve(true), 1500);
+  // });
+
+  const { id, ...rest } = client;
+
+  const { data } = await clientsApi.patch<Client>(`/clients/${id}`, rest);
+
+  /*
+  const queries = queryClient
+    .getQueryCache()
+    .findAll(["clients?page="], { exact: false });
+
+  // Basado en la query que se utiliza, se elimina la cache y esto
+  // realiza la petición de nuevo
+  queries.forEach((query) => query.fetch());
+*/
+  return data;
+};
+
 const useCounter = (id: number) => {
   const client = ref<Client>();
 
-  const { isLoading, data } = useQuery(["client", id], () => getClient(id), {});
+  const { isLoading, data, isError } = useQuery(
+    ["client", id],
+    () => getClient(id),
+    {
+      retry: false,
+      // onError(error: any) {
+      //   console.log(error.message);
+      // },
+    }
+  );
 
   watch(
     data,
@@ -27,9 +58,21 @@ const useCounter = (id: number) => {
     { immediate: true }
   );
 
+  const clientMutation = useMutation(updateClient);
+
+  // Eliminar anuncio "Guardado! y "Guardando..."
+
   return {
-    isLoading,
     client,
+    clientMutation,
+    isError,
+    isLoading,
+
+    // Methods
+    updateClient: clientMutation.mutate,
+    isUpdating: computed(() => clientMutation.isLoading.value),
+    isErrorUpdating: computed(() => clientMutation.isError.value),
+    isUpdatingSuccess: computed(() => clientMutation.isSuccess.value),
   };
 };
 

02-piniaApp/src/clients/composables/useClients.ts

@@ -32,11 +32,15 @@ const useClients = () => {
 
   // data es reactiva, entonces al existir un cambio,
   // se actualizan los cambios en la store.
-  watch(data, (clients) => {
-    if (clients) {
-      store.setClients(clients);
-    }
-  });
+  watch(
+    data,
+    (clients) => {
+      if (clients) {
+        store.setClients(clients);
+      }
+    },
+    { immediate: true }
+  );
 
   return {
     clients,

02-piniaApp/src/clients/pages/ClientPage.vue

@@ -1,47 +1,42 @@
 <script setup lang="ts">
 import LoadingModal from "@/shared/components/LoadingModal.vue";
 import useClient from "@/clients/composables/useClient";
-import { useRoute } from "vue-router";
-import { useMutation } from "@tanstack/vue-query";
-import type { Client } from "../interfaces/client";
-import clientsApi from "@/api/clients-api";
+import { useRoute, useRouter } from "vue-router";
 import { watch } from "vue";
 
 const route = useRoute();
-
-const { isLoading, client } = useClient(+route.params.id);
-
-// Actualizando cliente
-const updateClient = async (client: Client): Promise<Client> => {
-  await new Promise((resolve) => {
-    setTimeout(() => resolve(true), 1500);
-  });
-
-  const { id, ...rest } = client;
-
-  const { data } = await clientsApi.patch<Client>(`/clients/${id}`, rest);
-  return data;
-};
-
-const clientMutation = useMutation(updateClient);
-
-// Eliminar anuncio "Guardado! y "Guardando..."
+const router = useRouter();
+// const queryClient = useQueryClient();
+
+const {
+  client,
+  isError,
+  isLoading,
+  clientMutation,
+  updateClient,
+  isUpdating,
+  isUpdatingSuccess,
+} = useClient(+route.params.id);
 
 watch(clientMutation.isSuccess, () => {
   setTimeout(() => {
     clientMutation.reset();
   }, 2000);
 });
+
+watch(isError, () => {
+  if (isError.value) router.replace("/clients");
+});
 </script>
 <template>
-  <h3 v-if="clientMutation.isLoading.value">Guardando...</h3>
-  <h3 v-if="clientMutation.isSuccess.value">Guardado!</h3>
+  <h3 v-if="isUpdating">Guardando...</h3>
+  <h3 v-if="isUpdatingSuccess">Guardado!</h3>
 
   <LoadingModal v-if="isLoading" />
 
   <div v-if="client">
     <h1>{{ client.name }}</h1>
-    <form @submit.prevent="clientMutation.mutate(client)">
+    <form @submit.prevent="updateClient(client)">
       <input type="text" placeholder="Nombre" v-model="client.name" />
       <br />
       <input type="text" placeholder="Dirección" v-model="client.address" />