Using `useQuery` and `useMutation` for CRUD Operations

Objective: This assignment aims to understand and implement CRUD (Create, Read, Update, Delete) operations using the useQuery and useMutation hooks with React Query, interacting with the JSONPlaceholder API.

Problem Statement: You are tasked with creating a React application that allows users to perform CRUD operations on posts fetched from the JSONPlaceholder API (https://jsonplaceholder.typicode.com/guide/). The application should utilize the useQuery and useMutation hook from React Query to handle creating, updating, and deleting posts. Study the documentation of the JSONPlaceholder API to understand its endpoints, request methods, and response formats.

Task 1: Implement the functionality to fetch and display a list of posts from the JSONPlaceholder API.

Task 2: Add the ability for users to create new posts using a form.

Task 3: Enable users to update existing posts by editing their content.

Task 4: Allow users to delete posts from the application. Each displayed post should have a delete button where clicking will simulate that the user is getting a message back when a successful delete operation occurs.

Expected Outcomes:

Successful implementation of CRUD operations using the useMutation hook.
Displaying a list of posts fetched from the API.
Ability to create new posts and display the response data from the placeholder API.
Updating existing posts with edited content making sure to showcase the response data from the placeholder API.
When the user clicks delete, a message (either an alert or some other visual element) will display confirming that a delete method took place.

Lesson 3: Assignments | Data Fetching with React Query