Using `useMutation` for CRUD Operations

Objective: This assignment aims to understand and implement CRUD (Create, Read, Update, Delete) operations using the useMutation hook 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. The application should utilize the 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.

Code Examples:

Task 1: Fetch and Display Posts

Task 2: Create New Post

Task 3: Update Post

Task 4: Delete Post

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 see them added to the list dynamically.
Updating existing posts with edited content.
Deleting posts from the application with immediate visual feedback.

FE Module 12 Lesson 3: Assignments | Data Fetching with React Query