chore: modified useMutatePost

.eslintrc.json

@@ -43,6 +43,7 @@
     "no-unused-expressions": 0,
     "prefer-const": 0,
     "func-style": [1, "declaration", { "allowArrowFunctions": false }],
+    "n/handle-callback-err": 0,
     "prettier/prettier": [
       2,
       {

src/components/skeletons/SkeletonDBook.tsx

@@ -55,7 +55,9 @@ export function SkeletonDetailsBook() {
             skeletonHeight='6'
           />
           <Skeleton h='40px' rounded='lg' mb='3'></Skeleton>
-          <SkeletonText mt='1' noOfLines={15} spacing='2' skeletonHeight='3' />
+          <SkeletonText mt='1' noOfLines={7} spacing='2' skeletonHeight='3' />
+          <SkeletonText mt='8' noOfLines={5} spacing='2' skeletonHeight='3' />
+          <SkeletonText mt='8' noOfLines={3} spacing='2' skeletonHeight='3' />
           <Skeleton h='300px' rounded='lg' mt='10'></Skeleton>
           <Flex direction={{ base: 'column', md: 'row' }} mt='10' gap='3'>
             <Skeleton

src/hooks/querys.ts

@@ -1,4 +1,9 @@
-import { useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import {
+  useQuery,
+  useMutation,
+  useInfiniteQuery,
+  QueryClient,
+} from '@tanstack/react-query';
 
 import {
   getAllBooks,
@@ -11,9 +16,48 @@ import {
   postBook,
 } from '../services/api';
 import { keys } from '../utils/utils';
+import { BookType } from '../components/types';
+
+const queryClient = new QueryClient();
 
 function useMutatePost() {
-  return useMutation({ mutationKey: [keys.postBook], mutationFn: postBook });
+  return useMutation({
+    mutationKey: [keys.postBook],
+    mutationFn: postBook,
+    // Mutación optimista
+    onMutate: async (newPost) => {
+      // Cancelar consultas pendientes para la misma clave de consulta
+      await queryClient.cancelQueries([keys.postBook]);
+
+      // Obtener los datos de la consulta anterior
+      const previousPost = await queryClient.getQueryData([keys.postBook]);
+
+      // Actualizar los datos en caché con el nuevo post
+      await queryClient.setQueryData(
+        [keys.postBook],
+        (oldData?: BookType[] | undefined) => {
+          if (oldData === null) return [newPost];
+          // oldData debe ser iterable por eso el (oldData || []).
+          return [...(oldData || []), newPost];
+        },
+      );
+
+      return { previousPost }; // <--- Contexto
+    },
+    onError: (err, variables, context) => {
+      console.log(err);
+      // Revertir los datos en caché si la mutación falla
+      if (context?.previousPost !== null) {
+        queryClient.setQueryData([keys.postBook], context?.previousPost);
+      }
+    },
+    onSettled: async () => {
+      // Invalidar la consulta en caché para que se refresque
+      await queryClient.invalidateQueries({
+        queryKey: [keys.postBook],
+      });
+    },
+  });
 }
 
 function useAllBooks() {