Forem: wassim93

Building Infinite Scrolling in React Js with React Query v5

wassim93 — Wed, 15 May 2024 23:39:14 +0000

Introduction:

In the world of web development, building a todo list application is a rite of passage. In this tutorial, we'll take it a step further by integrating TypeScript for type safety and React Query for efficient data management. By the end, you'll have a fully functional todo list application with robust error handling, real-time updates, and type-safe code.

Step 1: Setting Up Your Project

To get started, let's set up a new React project with TypeScript and React Query. We'll use Vite for fast development and a modern build setup.



npm init vite@latest infinite-scroll-app --template react-ts

after that you have to select react as our option here
and then we will select typescript + swc (Speedy Web Compiler ) you can discover more details about it through this link https://www.dhiwise.com/post/maximize-performance-how-swc-enhances-vite-and-react
After finishing this you have to change directory to the project created and install dependencies



# Change directory
cd infinite-scroll-app
# install dependencies
npm install
# Install React Query
npm install react-query@latest

Step 2: Configuring ReactQuery within our project

In order to make react query works ensure that you've wrapped your application with QueryClientProvider and provided a QueryClient instance.So your main.tsx file will look like this



import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

To Get data we will be using Fake APi JSON Placeholder with the Todo endpoint.

Step 3: Fetching data

In this step we will be fetching our data from the API and then we set the limit to 10. The expected behavior for this is to render 10 values on the screen when the page is initially loaded and then continuously add more values when the user reaches the bottom screen.
So for this purpose and to make our project organized we are going to create a folder called services and add file called api.ts inside

Now let's create the function to fetch our data:



export const fetchData = async (page: number) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos?_pages=${page}&_limit=${10}`
  );
  const todos = await response.json();
  return todos;
};

Now let's go to our App.tsx file and implement the logic of implementing React infinite scrolling
Here, we will use the useInfiniteQuery hook from the React query library. Consider the block of code below:



  const { data, error, fetchNextPage, hasNextPage, isFetching, isLoading } = useInfiniteQuery({
    queryKey: ["todos"],
    queryFn: ({ pageParam }) => fetchData(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length > 0 ? allPages.length + 1 : undefined;
    },
  });

The options for useInfiniteQuery are identical to the useQuery hook with the addition of the following:

initialPageParam : Required : The default page param to use when fetching the first page.
getNextPageParam : Required : When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages, as well as pageParam information.

The useInfiniteQuery hook return those properties:

data, which contains the data from the API.
error, which handles any error from fetching the data from the API.
fetchNextpage, which fetches the next set of data to be displayed when the user reaches the bottom.
hasNextpage, which checks to see if there's any more data to be displayed.
isFetching, which shows when the data is currently being fetched.
isLoading, which shows when the first set of data is being loaded from the API.

Step 4: displaying data

In this step we display the list of data that will be renered on our initial page

The data properties for useInfiniteQuery will contain 2 attributes pages and pageParams

data.pages: TData[] Array containing all pages.
data.pageParams: unknown[] Array containing all page params. so we are going to format our returned data array before displaying them



  const flatData = useMemo(() => data?.pages.flat() ?? [], [data]);

  if (isLoading) return <h1>Loading...</h1>;

  if (error) return <h1>Error on fetch data...</h1>;

  return (
    <div>
      {flatData?.map((item) => (
        <div key={item.id}>
          <p>{item.title}</p>
        </div>
      ))}

      {isFetching && <div>Fetching more data...</div>}
    </div>
  );

Step 5: Implementing scrolling behavior

To make the infinte scroll works peerfectly we have first to detect if we have reached the ned of page to trigger a new request and get new data
You might have been wondering how the DOM knows when the user scrolls to the bottom of the page. Well, that's where the IntersectionObserver API comes in! The IntersectionObserver API provides a way to detect an element's position relative to the root element or viewport.



   const observer = useRef<IntersectionObserver>();
  const lastElementRef = useCallback(
    (node: HTMLDivElement) => {
      if (isLoading) return;

      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        console.log(entries);
        if (entries[0].isIntersecting && hasNextPage && !isFetching) {
          fetchNextPage();
        }
      });

      if (node) observer.current.observe(node);
    },
    [fetchNextPage, hasNextPage, isFetching, isLoading]
  );

This piece of code observes the user's motion on the screen. If the user reaches the bottom of the screen, the IntersectionObserver is alerted and serves the next set of data. Technically, it takes note of the point where the last element in the data intersects and then if hasNextPage is true, it fetches the new set of data to display.

Step 6: Final Result

Full code for this component



import { useInfiniteQuery } from "react-query";
import { fetchData } from "./services/api";
import { useCallback, useMemo, useRef } from "react";

function App() {
  const observer = useRef<IntersectionObserver>();

  const { data, error, fetchNextPage, hasNextPage, isFetching, isLoading } = useInfiniteQuery({
    queryKey: ["todos"],
    queryFn: ({ pageParam }) => fetchData(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length > 0 ? allPages.length + 1 : undefined;
    },
  });
  const flatData = useMemo(() => data?.pages.flat() ?? [], [data]);

  const lastElementRef = useCallback(
    (node: HTMLDivElement) => {
      if (isLoading) return;

      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        console.log(entries);
        if (entries[0].isIntersecting && hasNextPage && !isFetching) {
          fetchNextPage();
        }
      });

      if (node) observer.current.observe(node);
    },
    [fetchNextPage, hasNextPage, isFetching, isLoading]
  );
  if (isLoading) return <h1>Loading...</h1>;

  if (error) return <h1>Error on fetch data...</h1>;

  return (
    <div>
      {flatData?.map((item) => (
        <div key={item.id} ref={lastElementRef}>
          <p>{item.title}</p>
        </div>
      ))}

      {isFetching && <div>Fetching more data...</div>}
    </div>
  );
}

export default App;

and this will be our result

Recording-2024-05-16-at-01-15-49 hosted at ImgBB — ImgBB

Image Recording-2024-05-16-at-01-15-49 hosted in ImgBB

ibb.co

So that's it guys , I hope you liked of this article and i helped you to learn somthing new :D.

To access the full code for this project and explore further, you can find the repository on my: GitHub

Building a Todo List with TypeScript and React Query: A Comprehensive Guide

wassim93 — Tue, 14 May 2024 23:23:57 +0000

Introduction:

Step 1: Setting Up Your Project

To get started, let's set up a new React project with TypeScript and React Query. We'll use Vite for fast development and a modern build setup.



npm init vite@latest my-todo-list --template react-ts



# Change directory
cd my-todo-list
# install dependencies
npm install
# Install React Query
npm install react-query@latest

Step 2: Configuring ReactQuery within our project

In order to make react query works ensure that you've wrapped your application with QueryClientProvider and provided a QueryClient instance.So your main.tsx file will look like this



import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Step 3: Creating the Todo Component

Our first task is crafting a Todo component to showcase individual todo items. Each todo will sport a checkbox for completion tracking and a button to facilitate deletion.
But before that we have to create a new folder called components under src where we will add all of the components that we will be using in this tutorial.



interface TodoProps {
  id: number;
  text: string;
  completed: boolean;
  onDelete: (id: number) => void;
  onCompleteToggle: (id: number) => void;
}
const Todo = ({ id, text, completed, onDelete, onCompleteToggle }: TodoProps) => {
  return (
    <div className={`todo ${completed ? "done" : "in-progress"}`}>
      <div className="todo-actions">
        <input type="checkbox" checked={completed} onChange={() => onCompleteToggle(id)} />
        <button onClick={() => onDelete(id)}>Delete</button>
      </div>

      <div>{text}</div>
    </div>
  );
};

export default Todo;

Step 4: Creating the services file

To fetch todos from an external API, we'll leverage React Query's useQuery hook. This will enable us to efficiently manage data fetching and caching.So to achieve this we will create a folder called Services and add file api.ts that will hold all of our api request functions



// services/todoAPI.ts
const API_URL = "https://dummyjson.com/todos";

export const fetchTodos = async () => {
  const response = await fetch(API_URL);
  return response.json();
};

export const toggleTodoCompletion = async (id: number) => {
  try {
    const response = await fetch(`${API_URL}/${id}`, {
      method: "PATCH",
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({ completed: true }),
    });

    // Check if the request was not successful
    if (!response.ok) {
      throw new Error(`Failed to toggle completion status. Status: ${response.status}`);
    }

    // Parse response data
    const data = await response.json();

    // Return status and data
    return {
      status: response.status,
      data: data,
    };
  } catch (error) {
    // Handle errors
    console.error("Error toggling completion:", error);
    throw error;
  }
};

// services/todoAPI.ts
export const deleteTodo = async (id: number) => {
  try {
    const response = await fetch(`${API_URL}/${id}`, {
      method: "DELETE",
    });

    // Check if the request was successful
    if (!response.ok) {
      throw new Error(`Failed to delete todo. Status: ${response.status}`);
    }

    // Return status and data
    return {
      status: response.status,
      data: await response.json(),
    };
  } catch (error) {
    // Handle errors
    console.error("Error deleting todo:", error);
    throw error;
  }
};

Step 5: Creating TodoList component

We will implement in this component the required functions to fetch,update & delete data.

We will be using 2 hooks provided by this react query

useQuery : A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server.
useMutation : If your method modifies data on the server, we recommend using Mutations instead.

We will start with fetching data from Server



const { data, isLoading, isError } = useQuery("todos", fetchTodos, { staleTime: 60000 });

Let's try to decouple this line of code

1. "todos": is the unique identifier of the query , each query should have a unique identifier

2. fetchTodos: is the function that we defined in our api.ts file



// services/api.ts
const API_URL = "https://dummyjson.com/todos";

export const fetchTodos = async () => {
  const response = await fetch(API_URL);
  return response.json();
};

3. staleTime: if you have a list of data that changes infrequently, you could specify a stale time of x seconds. This would mean that React Query would only fetch the data from the server if it has been more than x seconds since the data was last fetched

So after getting data from server we just need to display our list of todos



 const { data, isLoading, isError } = useQuery("todos", fetchTodos, { staleTime: 60000 });
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching todos</div>;
  return (
    <div className="todo-list">
      {data?.todos.map((obj: TodoType) => (
        <Todo
          key={obj.id}
          id={obj.id}
          completed={obj.completed}
          text={obj.todo}

        />
      ))}
    </div>
  );
};

After getting data from server we will implmenent the delete & update functions

In this function we are going to useMutation hook



 const UpdateTodoStatus = useMutation({
    mutationFn: toggleTodoCompletion,
    onSuccess: (res) => {
      // Invalidate and refetch
      if (res.status === 200) {
        queryClient.invalidateQueries("todos");
      }
    },
  });

The UpdateTodoStatus mutation function is created using the useMutation hook from React Query. This function is responsible for toggling the completion status of a todo item. It takes an object as an argument with two properties:

1. mutationFn: This property specifies the function responsible for performing the mutation, in this case, toggleTodoCompletion. The toggleTodoCompletion function sends a PATCH request to the server to update the completion status of a todo item.



export const toggleTodoCompletion = async (id: number) => {
  try {
    const response = await fetch(`${API_URL}/${id}`, {
      method: "PATCH",
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({ completed: true }),
    });

    // Check if the request was not successful
    if (!response.ok) {
      throw new Error(`Failed to toggle completion status. Status: ${response.status}`);
    }

    // Parse response data
    const data = await response.json();

    // Return status and data
    return {
      status: response.status,
      data: data,
    };
  } catch (error) {
    // Handle errors
    console.error("Error toggling completion:", error);
    throw error;
  }
};

2. onSuccess: This property defines a callback function that is executed when the mutation is successful. In this callback function, we check if the response status is 200, indicating that the mutation was successful. If the status is 200, we use queryClient.invalidateQueries("todos") to invalidate the "todos" query in the React Query cache. This triggers a refetch of the todos data, ensuring that the UI is updated with the latest changes after toggling the completion status of a todo item.

For the delete it will be similar to update



 const DeleteTodo = useMutation({
    mutationFn: deleteTodo,
    onSuccess: (res) => {
      // Invalidate and refetch
      if (res.status === 200) {
        queryClient.invalidateQueries("todos");
      }
    },
  });



// services/api.ts
export const deleteTodo = async (id: number) => {
  try {
    const response = await fetch(`${API_URL}/${id}`, {
      method: "DELETE",
    });

    // Check if the request was successful
    if (!response.ok) {
      throw new Error(`Failed to delete todo. Status: ${response.status}`);
    }

    // Return status and data
    return {
      status: response.status,
      data: await response.json(),
    };
  } catch (error) {
    // Handle errors
    console.error("Error deleting todo:", error);
    throw error;
  }
};

Note: We are using dummyjson api for getting data so for the deletion and update you wont notice any change on the server side it will be just a simulation
dummyjson.com

Here is the full code of TodoList component



import { QueryClient, useMutation, useQuery } from "react-query";
import Todo from "./Todo";
import { deleteTodo, fetchTodos, toggleTodoCompletion } from "../services/api";
const queryClient = new QueryClient();

interface TodoType {
  id: number;
  todo: string;
  completed: boolean;
}
const TodoList = () => {
  const { data, isLoading, isError } = useQuery("todos", fetchTodos, { staleTime: 60000 });
  // Mutations
  const UpdateTodoStatus = useMutation({
    mutationFn: toggleTodoCompletion,
    onSuccess: (res) => {
      // Invalidate and refetch
      if (res.status === 200) {
        queryClient.invalidateQueries("todos");
      }
    },
  });

  const DeleteTodo = useMutation({
    mutationFn: deleteTodo,
    onSuccess: (res) => {
      // Invalidate and refetch
      if (res.status === 200) {
        queryClient.invalidateQueries("todos");
      }
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching todos</div>;
  return (
    <div className="todo-list">
      {data?.todos.map((obj: TodoType) => (
        <Todo
          key={obj.id}
          id={obj.id}
          completed={obj.completed}
          text={obj.todo}
          onDelete={(id: number) => DeleteTodo.mutate(id)} // Call handleDeleteTodo
          onCompleteToggle={(id: number) => UpdateTodoStatus.mutate(id)}
        />
      ))}
    </div>
  );
};

TodoList.propTypes = {};

export default TodoList;

Conclusion:
By following this tutorial, We've leveraged React Query to handle data fetching, mutation, and caching, providing a seamless experience for managing todos. With its declarative API and powerful caching capabilities, React Query simplifies state management and data fetching, enabling you to focus on building great user experiences.

To access the full code for this project and explore further, you can find the repository on my: GitHub