Build a ToDo app with React, Tailwind and Webiny Headless CMS

Creating New ToDo Items

To create new ToDo items, we will use the useMutation hook from the Apollo client. With it, we will pass the value from the input field when the Add Todo item button is clicked to create new ToDos. We will do this in App.js:

import { useQuery, gql, useMutation } from "@apollo/client";

// then we define the query to create a todo
const ADD_TODOS = gql`
mutation AddTodo($todoItem: String!){
  createTodo(
    data:{
      todoItem: $todoItem
    }
  )
  {
    data {
        todoItem,
        taskCompleted
    }
  }
}
`;

The ADD_TODOS query defined above executes a mutation createTodo. This mutation will take in the todoItem in the data object, execute the mutation and return the data. For the item to be added to the ToDo list, we defined a variable $todoItem of data type string. We will pass a value to this variable when executing the mutation.

We will execute the ADD_TODOS mutation in the App component using useMutation:

const [addTodo] = useMutation(ADD_TODOS);

The useMutation hook above depends on the addTodo function to execute the ADD_TODOS mutation. When this function is called, the mutation gets executed. We will call this function in the button to Add new Todo:

<button
  className="h-full px-5 py-2 bg-[#0264F6] text-white font-medium rounded-md"
  onClick={() => {
    //execute function to add new todo to the list
    addTodo({ variables: { todoItem: todo } });
    refetch();
    setTodo("");
  }}
>

To re-fetch the to-dos when a new ToDo item is added, we will use the refetch() hook provided by useQuery:

const { loading, error, data, refetch } = useQuery(GET_TODOS)

Now, we can create new ToDo items in our application:

Deleting a ToDo Item

To delete ToDo items, we will create a new mutation DELETE_TODO in TaskList.js. Then we will use the useMutation hook to execute this mutation when the Delete button is clicked:

import { gql, useMutation } from "@apollo/client";
const TaskList = ({ todos, gettodo }) => {
  const DELETE_TODO = gql`
    mutation DeleteTodo($id: ID!){
      deleteTodo(revision: $id) {
        data
      }
    }
  `;
  const [deleteTodo] = useMutation(DELETE_TODO);

In the code above, we defined the mutation to delete a ToDo item. The ToDo item to be deleted is referenced by an id variable. We will call the deleteTodo function to execute the mutation, and also pass the id to the mutation using the onClick event handler of the delete button:

<button className="bg-white text-blue-600 px-2 py-2 font-medium rounded-md"
  onClick={() => {
    deleteTodo({ variables: { id: id } });
  }}
  >
    Delete
</button>

Within the onClick event handler above, we called the deleteTodo function and passed the data of the id to the variable we defined.

To re-fetch our data to reflect the changes caused by deleting a ToDo item, we will add a property refetchQueries provided by the useMutation hook:

const [deleteTodo] = useMutation(DELETE_TODO, {
    refetchQueries: [
      {query: gettodo},
    ],
  });

the query property will take in the query we want to execute, in this case, is the GET_TODOS query defined in App.js. To make use of it here, we just need to pass the variable to the TaskList component as a prop:

<TaskList todos={data} gettodo={GET_TODOS}/>

Then we can get this prop in the TaskList.js file:

const TaskList = ({ todos, gettodo }) => {
//....

With this done, our delete functionality should work properly:

Updating ToDo Completion Property

For the final feature of our ToDo application, we want to be able to update the task when it has been completed. We will create a new mutation for this in our TaskList.js file:

const UPDATE_TODO = gql`
    mutation UpdateQuery($id: ID!, $completed: Boolean!) {
      updateTodo(
        revision: $id
        data: { taskCompleted: $completed }
      ) {
        data {
          todoItem
          taskCompleted
        }
      }
    }
  `;

  const [updateTodo] = useMutation(UPDATE_TODO, {
    refetchQueries: [
      { query: gettodo },
    ],
  });

Here the update mutation references the todo item by the id. Then we update the taskCompleted data by passing a Boolean value to it using the $completed variable. We also have our useMutation hook which executes the mutation when the updateTodo function is called, and also re-fetches the gettodo query to update the application.

For the updateTodo function, we will call it in the Task Completed button and pass in the id and Boolean values:

<button className="bg-blue-600 text-white px-2 py-2 font-medium rounded-md"
  onClick={()=>{
    updateTodo({ variables: { id: id, completed: !taskCompleted } });
  }}
  >
    {taskCompleted ? "Completed" : "Not Completed"}
  </button>

In the code above, we pass in the id and the opposite value of our taskCompleted property from our CMS. This will set a not completed task to completed and vice-versa when the button is clicked.

Lastly, we will add a style to apply a strikethrough property to to-do items that have been completed:

 <li className={` ${taskCompleted? "line-through": "" } list-none w-2/3 text-left break-normal`}>
  {todoItem}
</li>

Now, if we run our code and open the result in our browser, we have the following result:

Conclusion

We have come to the end of this tutorial. In this tutorial, we learned about the Webiny Headless CMS, and how we can build a CRUD app with it, through working on a ToDo application.

Full source code: https://github.com/webiny/write-with-webiny/tree/main/tutorials/todo-react-tailwind

This article was written by a contributor to the Write with Webiny program. Would you like to write a technical article like this and get paid to do so? Check out the Write with Webiny GitHub repo.