React Query

Author: Chaffychaf007

package-lock.json

@@ -9,6 +9,8 @@
     "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",

package.json

@@ -1,7 +1,9 @@
-import './App.css';
+import "./App.css";
+import PostList from "./react-query/PostList";
+import TodoList from "./react-query/TodoList";
 
 function App() {
-  return <h1>React Starter Project</h1>;
+  return <PostList />;
 }
 
 export default App;

src/App.tsx

@@ -1,13 +1,18 @@
-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 { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import App from "./App";
+import "./index.css";
 
-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}>
+      <App />
+      <ReactQueryDevtools />
+    </QueryClientProvider>
   </React.StrictMode>
 );

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

src/react-query/PostList.tsx

@@ -1,29 +1,15 @@
-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('');
+  const { data: todos, error, isLoading } = useTodos();
 
-  useEffect(() => {
-    axios
-      .get('https://jsonplaceholder.typicode.com/todos')
-      .then((res) => setTodos(res.data))
-      .catch((error) => setError(error));
-  }, []);
+  if (isLoading) return <p>Loading...</p>;
 
-  if (error) return <p>{error}</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/TodoList.tsx

@@ -0,0 +1,35 @@
+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<Post[]>('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/react-query/hooks/usePosts.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+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,
+        staleTime: 10 * 1000
+      });
+};
+
+export default useTodos;