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

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 my-todo-list --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 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

Blog