Setting up React Query

package.json

@@ -9,14 +9,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "4.28",
+    "@tanstack/react-query-devtools": "4.28",
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "simple-zustand-devtools": "^1.1.0",
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"

src/App.tsx

@@ -1,7 +1,17 @@
-import './App.css';
+import "./App.css";
+import HomePage from "./state-management/HomePage";
+import NavBar from "./state-management/NavBar";
+import Counter from "./state-management/counter/Counter";
+import { TaskProvider } from "./state-management/tasks";
 
 function App() {
-  return <h1>React Starter Project</h1>;
+  return (
+    <TaskProvider>
+      <Counter />
+      <NavBar />
+      <HomePage />
+    </TaskProvider>
+  );
 }
 
 export default App;

src/hooks/useAddTodo.ts

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

src/hooks/usePosts.ts

@@ -0,0 +1,33 @@
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+}
+
+interface PostQuery {
+  pageSize: number;
+}
+
+const usePosts = (query: PostQuery) =>
+  useInfiniteQuery<Post[], Error>({
+    queryKey: ["posts", query],
+    queryFn: ({ pageParam = 1 }) =>
+      axios
+        .get("https://jsonplaceholder.typicode.com/posts", {
+          params: {
+            _start: (pageParam - 1) * query.pageSize,
+            _limit: query.pageSize,
+          },
+        })
+        .then((res) => res.data),
+    staleTime: 1 * 60 * 1000,
+    keepPreviousData: true,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length > 0 ? allPages.length + 1 : undefined;
+    },
+  });
+export default usePosts;

src/hooks/useTodos.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { CACHE_KEY_TODOS } from "../react-query/constants";
+import todoService, { Todo } from "../services/todoService";
+
+const useTodos = () => {
+  return useQuery<Todo[], Error>({
+    queryKey: CACHE_KEY_TODOS,
+    queryFn: todoService.getAll,
+    staleTime: 10 * 1000,
+  });
+};
+
+export default useTodos;

src/main.tsx

@@ -1,13 +1,20 @@
-import 'bootstrap/dist/css/bootstrap.css';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
+import "bootstrap/dist/css/bootstrap.css";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import "./index.css";
+import { RouterProvider } from "react-router-dom";
+import router from "./routing/routes";
 
-ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-).render(
+const queryClient = new QueryClient();
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools />
+    </QueryClientProvider>
   </React.StrictMode>
 );

src/react-query/PostList.tsx

@@ -1,34 +1,42 @@
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-
-interface Post {
-  id: number;
-  title: string;
-  body: string;
-  userId: number;
-}
+import usePosts from "../hooks/usePosts";
+import React from "react";
 
 const PostList = () => {
-  const [posts, setPosts] = useState<Post[]>([]);
-  const [error, setError] = useState('');
+  const pageSize = 10;
 
-  useEffect(() => {
-    axios
-      .get('https://jsonplaceholder.typicode.com/posts')
-      .then((res) => setPosts(res.data))
-      .catch((error) => setError(error));
-  }, []);
+  const {
+    data: posts,
+    error,
+    isLoading,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = usePosts({ pageSize });
 
-  if (error) return <p>{error}</p>;
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>{error.message}</p>;
 
   return (
-    <ul className="list-group">
-      {posts.map((post) => (
-        <li key={post.id} className="list-group-item">
-          {post.title}
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul className="list-group">
+        {posts.pages.map((page) => (
+          <React.Fragment>
+            {page.map((post) => (
+              <li key={post.id} className="list-group-item">
+                {post.title}
+              </li>
+            ))}
+          </React.Fragment>
+        ))}
+      </ul>
+
+      <button
+        disabled={isFetchingNextPage}
+        onClick={() => fetchNextPage()}
+        className="btn btn-primary mt-3"
+      >
+        {isFetchingNextPage ? "Loading..." : "Load More"}
+      </button>
+    </>
   );
 };
 

src/react-query/TodoForm.tsx

@@ -1,17 +1,40 @@
-import { useRef } from 'react';
+import { useRef } from "react";
+import useAddTodo from "../hooks/useAddTodo";
 
 const TodoForm = () => {
+  const addTodo = useAddTodo(() => {
+    if (ref.current) ref.current.value = "";
+  });
   const ref = useRef<HTMLInputElement>(null);
 
   return (
-    <form className="row mb-3">
-      <div className="col">
-        <input ref={ref} type="text" className="form-control" />
-      </div>
-      <div className="col">
-        <button className="btn btn-primary">Add</button>
-      </div>
-    </form>
+    <>
+      {addTodo.error && (
+        <div className="alert-danger">{addTodo.error.message}</div>
+      )}
+
+      <form
+        className="row mb-3"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (ref.current && ref.current.value) {
+            addTodo.mutate({
+              id: 0,
+              title: ref.current?.value,
+              userId: 1,
+              completed: false,
+            });
+          }
+        }}
+      >
+        <div className="col">
+          <input ref={ref} type="text" className="form-control" />
+        </div>
+        <div className="col">
+          <button className="btn btn-primary">Add</button>
+        </div>
+      </form>
+    </>
   );
 };
 

src/react-query/TodoList.tsx

@@ -1,29 +1,14 @@
-import axios from 'axios';
-import React, { useEffect, useState } from 'react';
-
-interface Todo {
-  id: number;
-  title: string;
-  userId: number;
-  completed: boolean;
-}
+import useTodos from "../hooks/useTodos";
 
 const TodoList = () => {
-  const [todos, setTodos] = useState<Todo[]>([]);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    axios
-      .get('https://jsonplaceholder.typicode.com/todos')
-      .then((res) => setTodos(res.data))
-      .catch((error) => setError(error));
-  }, []);
+  const { data: todos, error, isLoading } = useTodos();
 
-  if (error) return <p>{error}</p>;
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>{error.message}</p>;
 
   return (
     <ul className="list-group">
-      {todos.map((todo) => (
+      {todos?.map((todo) => (
         <li key={todo.id} className="list-group-item">
           {todo.title}
         </li>

src/react-query/constants.ts

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

src/routing/ContactPage.tsx

@@ -1,9 +1,13 @@
+import { useNavigate } from "react-router-dom";
+
 const ContactPage = () => {
+  const navigate = useNavigate();
   return (
     <form
       onSubmit={(event) => {
         event.preventDefault();
         // Redirect the user to the home page
+        navigate("/");
       }}
     >
       <button className="btn btn-primary">Submit</button>

src/routing/ErrorPage.tsx

@@ -1,8 +1,12 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+
 const ErrorPage = () => {
+  const error = useRouteError();
+
   return (
     <>
       <h1>Oops...</h1>
-      <p>Sorry, an unexpected error has occurred.</p>
+      <p>{isRouteErrorResponse(error) ? "Invalid Page" : "Unexpected Error"}</p>
     </>
   );
 };

src/routing/HomePage.tsx

@@ -1,10 +1,13 @@
+import { Link } from "react-router-dom";
+
 const HomePage = () => {
   return (
     <>
       <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-        Incidunt, mollitia!
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt,
+        mollitia!
       </p>
+      <Link to="/users">Users</Link>
       <a href="/users">Users</a>
     </>
   );

src/routing/Layout.tsx

@@ -1,10 +1,13 @@
-import NavBar from './NavBar';
+import { Outlet } from "react-router-dom";
+import NavBar from "./NavBar";
 
 const Layout = () => {
   return (
     <>
       <NavBar />
-      <div id="main"></div>
+      <div id="main">
+        <Outlet />
+      </div>
     </>
   );
 };