;
+ return (
+
+
+
+
+
+ );
}
export default App;
diff --git a/src/main.tsx b/src/main.tsx
index c7edb443..6682c2fe 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,35 @@
-import 'bootstrap/dist/css/bootstrap.css';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import App from "./App";
+import "bootstrap/dist/css/bootstrap.css";
+import "./index.css";
+import { RouterProvider } from "react-router-dom";
+import router from "./routing/routes";
-ReactDOM.createRoot(
- document.getElementById('root') as HTMLElement
-).render(
+// On the below line that I create a new queryClient, I can pass a configuration object
+const queryClient = new QueryClient({
+ defaultOptions: {
+ // in this object I can override the default settings for queries globally
+ queries: {
+ retry: 3, //retries 3 times after failing
+ cacheTime: 300_000, //5m => if query has no observer, or in other word, no component is using that query is considered inactive. The result of inactive queries is remove from the cache after five minutes. THIS IS CALLED GARBAGE COLLECTION. The default value make sense for a lot of applications but I can always customize this depending on the requirements.
+ staleTime: 0, //How long data is considered fresh. Zero means the moment that I get a piece of data it is treated as old. So the next time that I need the data, RQ fetch the fresh data from the backend.
+ //All three below option is for RQ AutoRefresh and their default value is true.
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ },
+ },
+});
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
+
+ {/* Instead of using a specific component like App, we render RouterProvider and let react-router decide what component should be rendered depending on the users location. This is the idea of routing. */}
+
+
+
);
diff --git a/src/react-query/PostList.tsx b/src/react-query/PostList.tsx
index d4158947..13e90015 100644
--- a/src/react-query/PostList.tsx
+++ b/src/react-query/PostList.tsx
@@ -1,34 +1,37 @@
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-
-interface Post {
- id: number;
- title: string;
- body: string;
- userId: number;
-}
+import React from "react";
+import usePosts from "./hooks/usePosts";
+import { useState } from "react";
const PostList = () => {
- const [posts, setPosts] = useState([]);
- const [error, setError] = useState('');
-
- useEffect(() => {
- axios
- .get('https://jsonplaceholder.typicode.com/posts')
- .then((res) => setPosts(res.data))
- .catch((error) => setError(error));
- }, []);
-
- if (error) return
+ {/* the data(posts) object that I get from this infinite query is no longer an array an array of posts. It's an instance of infinite data. And I have access to a couple of properties inside this object. So I should show the posts for each page separately. */}
+ {data.pages.map((page, index) => (
+
+ {page.map((post) => (
+
;
+ const { data: todos, error, isLoading } = useTodos();
+ // Now this component only has single responsibility is purely concerned with markup. It doesn't know how data should be fetched.
+ // The other benefit is that if tomorrow I need access to these data in another component, I should only call this new hook in that component. So I use the concept of reusability and modularity.
+ if (isLoading) return
diff --git a/src/react-query/constant.ts b/src/react-query/constant.ts
new file mode 100644
index 00000000..dda4c60b
--- /dev/null
+++ b/src/react-query/constant.ts
@@ -0,0 +1 @@
+export const CACHE_KEY_TODOS = ["todos"];
diff --git a/src/react-query/hooks/useAddTodo.ts b/src/react-query/hooks/useAddTodo.ts
new file mode 100644
index 00000000..4f2907a6
--- /dev/null
+++ b/src/react-query/hooks/useAddTodo.ts
@@ -0,0 +1,44 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { CACHE_KEY_TODOS } from "../constant";
+import todoService, { Todo } from "../services/todoService";
+interface AddTodoContext {
+ previousTodos: Todo[];
+}
+
+const useAddTodo = (onAdd: () => void) => {
+ const QueryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: todoService.post,
+ onMutate: (newTodo: Todo) => {
+ const previousTodos =
+ QueryClient.getQueryData([CACHE_KEY_TODOS]) || [];
+ QueryClient.setQueryData([CACHE_KEY_TODOS], (todos = []) => [
+ newTodo,
+ ...todos,
+ ]);
+ // Inside this hook I only want the logic part for adding todo to backend and update the cache. This hook is all about data management and should focus on that aspect only. So, I should not insert UI related logic to the consumer of this hook(TodoForm component)
+ // if (ref.current) ref.current.value = "";
+ // I can pass onAdd into this hook and then do the same logic as above line in the TodoForm component.
+ onAdd();
+ return { previousTodos };
+ },
+
+ onSuccess: (savedTodo, newTodo) => {
+ QueryClient.setQueryData([CACHE_KEY_TODOS], (todos) =>
+ todos?.map((todo) => (todo === newTodo ? savedTodo : todo))
+ );
+ },
+
+ onError: (error, newTodo, context) => {
+ if (!context) return;
+
+ QueryClient.setQueryData(
+ [CACHE_KEY_TODOS],
+ context.previousTodos
+ );
+ },
+ });
+};
+
+export default useAddTodo;
diff --git a/src/react-query/hooks/usePosts.ts b/src/react-query/hooks/usePosts.ts
new file mode 100644
index 00000000..b05c691b
--- /dev/null
+++ b/src/react-query/hooks/usePosts.ts
@@ -0,0 +1,35 @@
+import axios from "axios";
+import { useInfiniteQuery } from "@tanstack/react-query";
+interface Post {
+ id: number;
+ title: string;
+ body: string;
+ userId: number;
+}
+interface PostQuery {
+ pageSize: number;
+}
+
+const usePosts = (query: PostQuery) => {
+ return useInfiniteQuery({
+ 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, //1m
+ // With setting keepPreviousData property to true, I have a nicer UX as user goes to the next page, there is no jumping up and down. As we go in and out of the loading state, the screen jump up and down. I can improve the UX by keeping the data from current page while the user is waiting for new data. When the new data is available, I can seamless swap the data for the current page ==>
+ keepPreviousData: true,
+ getNextPageParam: (lastPage, allPages) => {
+ // 1 -> 2
+ // json placeholder has allPages and lastPage
+ return lastPage.length > 0 ? allPages.length + 1 : undefined;
+ },
+ });
+};
+export default usePosts;
diff --git a/src/react-query/hooks/useTodos.ts b/src/react-query/hooks/useTodos.ts
new file mode 100644
index 00000000..cc26b62e
--- /dev/null
+++ b/src/react-query/hooks/useTodos.ts
@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { CACHE_KEY_TODOS } from "../constant";
+import todoService, { Todo } from "../services/todoService";
+
+const useTodos = () => {
+ return useQuery({
+ queryKey: [CACHE_KEY_TODOS],
+ // Now I just reference that method not call that( not use parentheses .getAll() )
+ queryFn: todoService.getAll,
+ staleTime: 10 * 1000, //10s it is not globally
+ });
+};
+export default useTodos;
diff --git a/src/react-query/services/apiClient.ts b/src/react-query/services/apiClient.ts
new file mode 100644
index 00000000..ea27bf64
--- /dev/null
+++ b/src/react-query/services/apiClient.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+
+// Make default axios instance
+const axiosInstance = axios.create({
+ baseURL: "https://jsonplaceholder.typicode.com",
+});
+
+class APIClient {
+ endpoint: string;
+ // initialize it once in the constructor
+ constructor(endpoint: string) {
+ this.endpoint = endpoint;
+ }
+
+ // In front of getAll and post I should use generic type description, but I can do that for my class to stop duplication in my code.
+
+ getAll = () => {
+ return (
+ axiosInstance
+ // getAll method first return a promise of any BUT I WANNA work with typed objects. So, after .get I provide a generic type argument. Because I wanna this method be generic I only add T[]
+ .get(this.endpoint)
+ .then((res) => res.data)
+ );
+ };
+
+ post = (data: T) => {
+ return axiosInstance.post(this.endpoint, data).then((res) => res.data);
+ };
+}
+
+export default APIClient;
diff --git a/src/react-query/services/todoService.ts b/src/react-query/services/todoService.ts
new file mode 100644
index 00000000..48043c76
--- /dev/null
+++ b/src/react-query/services/todoService.ts
@@ -0,0 +1,10 @@
+// Create a single instance of our client
+import APIClient from "./apiClient";
+
+export interface Todo {
+ id: number;
+ title: string;
+ userId: number;
+ completed: boolean;
+}
+export default new APIClient("/todos");
diff --git a/src/routing/ContactPage.tsx b/src/routing/ContactPage.tsx
index f7451054..e04cf1d3 100644
--- a/src/routing/ContactPage.tsx
+++ b/src/routing/ContactPage.tsx
@@ -1,9 +1,15 @@
+import { useNavigate } from "react-router-dom";
+
const ContactPage = () => {
+ // I want to redirect the user to the home page after submitting a form
+ // I should use Navigate hook
+ const navigate = useNavigate();
return (