DEV Community

Ayoola Damilare
Ayoola Damilare

Posted on

1

My React Journey: Day 19

Practice with JSON APIs and Mock Servers

Working with json-server is a great way to simulate a backend server and practice API interactions like GET, POST, PUT, PATCH, and DELETE.

What is json-server?

  • A tool that allows you to quickly create a mock server to work with a JSON database.
  • Ideal for prototyping and testing APIs without needing a fully functional backend.

Setup and Installation

1. Prerequisite: Node.js

  • Ensure Node.js is installed on your system. Verify using:
node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

2. Install json-server

  • Install globally using npm:
npm install -g json-server@0.17.4
Enter fullscreen mode Exit fullscreen mode

How to Use json-server

1. Start the Server
Create a db.json file in your working directory with some initial data. Example:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • Start the server and watch for changes in the db.json file:
json-server --watch db.json
Enter fullscreen mode Exit fullscreen mode

2. Explore Endpoints
The server automatically creates RESTful endpoints for each collection in db.json:

  • GET /posts → Fetch all posts
  • GET /posts/1 → Fetch post with ID 1
  • POST /posts → Add a new post
  • PUT /posts/1 → Replace the entire post with ID 1
  • PATCH /posts/1 → Update specific fields in the post with ID 1
  • DELETE /posts/1 → Delete the post with ID 1

Using Postman

Postman is a tool for making HTTP requests to test APIs. Here’s how to perform each operation with Postman:

1. GET (Fetch Data)

2. POST (Add New Data)

{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}
Enter fullscreen mode Exit fullscreen mode
  • Adds a new post to the posts collection.

3. PUT (Replace Entire Resource)

  • Request Type: PUT
  • URL: http://localhost:3000/posts/2
  • Headers: Content-Type: application/json
  • Body (JSON):
    {
    "title": "Updated Title"
    }

  • Result: Replaces the entire resource with the provided data.

Before:

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}
Enter fullscreen mode Exit fullscreen mode

After:

{
  "title": "Updated Title"
}
Enter fullscreen mode Exit fullscreen mode

4. PATCH (Update Specific Fields)

{
  "content": "Updated Content"
}
Enter fullscreen mode Exit fullscreen mode

Result: Updates only the specified field in the resource.

Before:

{
  "id": 1,
  "title": "First Post",
  "content": "Hello World!"
}
Enter fullscreen mode Exit fullscreen mode

After:

{
  "id": 1,
  "title": "First Post",
  "content": "Updated Content"
}
Enter fullscreen mode Exit fullscreen mode

5. DELETE (Remove Data)

Key Differences Between PUT and PATCH

PUT

  • Replaces the entire resource.
  • Omits any fields not included in the body.

PATCH

  • Updates only specified fields.
  • Retains fields not mentioned in the body.

Conclusion

What I Learned:

  • Installed and used json-server to create a mock API server.
  • Practiced basic API operations: GET, POST, PUT, PATCH, DELETE.
  • Understood the difference between PUT and PATCH.

Day 19 Crushed.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay