API Client & HTTP Service

Author: Chaffychaf007

src/react-query/TodoForm.tsx

@@ -1,25 +1,12 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
 import { useRef } from 'react';
-import { Todo } from './hooks/useTodos';
-import axios from 'axios';
+import useAddTodo from './hooks/useAddTodo';
 
 const TodoForm = () => {
-  const queryClient = useQueryClient();
-  const addTodo = useMutation<Todo, Error, Todo>({
-    mutationFn: (todo: Todo) =>
-      axios
-        .post<Todo>('https://jsonplaceholder.typicode.com/todos', todo)
-        .then(res => res.data),
-    onSuccess: (savedTodo, newTodo) => {
-      // queryClient.invalidateQueries({
-      //   queryKey: ['todos']
-      // })
-        queryClient.setQueryData<Todo[]>(['todos'], todos => [savedTodo, ...(todos || [])]);
-
-        if(ref.current) ref.current.value = '';
-    }
-  });
   const ref = useRef<HTMLInputElement>(null);
+  const addTodo = useAddTodo(() => {
+     if(ref.current) ref.current.value = '';
+  })
   return (
     <>
     { addTodo.error && <div className="alert alert-danger">
@@ -40,8 +27,8 @@ const TodoForm = () => {
         <input ref={ref} type="text" className="form-control" />
       </div>
       <div className="col">
-        <button className="btn btn-primary" disabled={addTodo.isLoading}>
-          {addTodo.isLoading ? 'Adding...' : 'Add'}
+        <button className="btn btn-primary">
+          Add
         </button>
       </div>
     </form>

src/react-query/constants.ts

@@ -0,0 +1 @@
+export const CACHE_KEY_TODOS = ['todos'];

src/react-query/hooks/useAddTodo.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { CACHE_KEY_TODOS } from "../constants";
+import todoService, { Todo } from "../services/todoService";
+
+
+interface AddTodoContext {
+    previousTodos: Todo[] 
+  }
+
+const useAddTodo = (onAdd: () => void) => {
+const queryClient = useQueryClient();
+  return useMutation<Todo, Error, Todo, AddTodoContext>({
+    mutationFn: todoService.post,
+
+    onMutate: (newTodo: Todo) => {
+      const previousTodos = queryClient.getQueryData<Todo[]>(CACHE_KEY_TODOS) || [];
+
+      queryClient.setQueryData<Todo[]>(CACHE_KEY_TODOS, (todos = []) => [newTodo, ...todos]);
+
+    onAdd();
+       
+        return { previousTodos };
+    },
+
+    onSuccess: (savedTodo, newTodo) => {
+        queryClient.setQueryData<Todo[]>(CACHE_KEY_TODOS, todos => todos?.map(todo => todo === newTodo ? savedTodo : todo));
+    },
+
+    onError: (error, newTodo, context) => {
+      if (!context) return;
+
+      queryClient.setQueryData<Todo[]>(CACHE_KEY_TODOS, context.previousTodos);
+    }
+  });
+}
+
+export default useAddTodo;

src/react-query/hooks/useTodos.ts

@@ -1,22 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
+import { CACHE_KEY_TODOS } from "../constants";
+import todoService, { Todo } from "../services/todoService";
 
-export interface Todo {
-    id: number;
-    title: string;
-    userId: number;
-    completed: boolean;
-  }
 
 const useTodos= () => {
-    const fetchTodos = () =>
-    axios
-      .get<Todo[]>("https://jsonplaceholder.typicode.com/todos")
-      .then((res) => res.data);
-
       return useQuery<Todo[], Error>({
-        queryKey: ["todos"],
-        queryFn: fetchTodos,
+        queryKey: CACHE_KEY_TODOS,
+        queryFn: todoService.getAll,
         staleTime: 10 * 1000
       });
 };

src/react-query/services/apiClient.ts

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+const axiosInstance = axios.create({
+  baseURL: "https://jsonplaceholder.typicode.com",
+});
+
+class APIClient<T> {
+  endpoint: string;
+
+  constructor(endpoint: string) {
+    this.endpoint = endpoint;
+  }
+
+  getAll = () => {
+    return axiosInstance
+        .get<T[]>(this.endpoint)
+        .then((res) => res.data);
+  }
+  post = (data: T) => {
+    return axiosInstance
+    .post<T>(this.endpoint, data)
+    .then(res => res.data);
+  }
+}
+
+export default APIClient;

src/react-query/services/todoService.ts

@@ -0,0 +1,10 @@
+import APIClient from "./apiClient";
+
+export interface Todo {
+    id: number;
+    title: string;
+    userId: number;
+    completed: boolean;
+  }
+
+export default new APIClient<Todo>('/todos');