Optimizing API Calls with Batch Requests

Optimizing API calls with batch requests is a powerful technique to reduce the number of HTTP requests, which can improve performance and decrease latency, especially when dealing with multiple API calls that can be sent together. Instead of making separate requests for each action, batch requests allow you to send multiple requests in a single HTTP request, saving both client and server resources.

Here’s a step-by-step guide on how to implement batch API requests in a React application.

1. Understanding Batch Requests

Batch requests involve combining multiple API calls into a single HTTP request. This can:

• Reduce the number of network round trips.
• Improve performance by reducing overhead.
• Minimize server load, as the server processes multiple requests in a single batch.

2. Server-Side Support for Batch Requests

To implement batch requests, the server must support processing multiple API calls in one request. This usually means sending a collection of individual API requests in one payload, and the server will process them and return a combined response.

Here’s an example of a basic batch API endpoint in a server built with Node.js and Express:

// server.js (Node.js with Express)
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json()); // Middleware to parse JSON request body

// Batch API endpoint
app.post('/batch', (req, res) => {
  const requests = req.body.requests;

  // Simulate processing of each request
  const responses = requests.map((request) => {
    // Example logic for each request
    switch (request.endpoint) {
      case 'getUserData':
        return { data: { id: 1, name: 'John Doe' }, status: 'success' };
      case 'getProductData':
        return { data: { id: 100, name: 'Product A' }, status: 'success' };
      default:
        return { error: 'Unknown endpoint' };
    }
  });

  res.json({ responses });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

In this example, the server accepts a POST request at /batch that contains multiple requests, processes each request, and returns a combined response.

3. Client-Side: Sending Batch Requests in React

Now, let’s implement the client-side logic to send batch requests in React.

Example: Batch Request in React

import React, { useState } from 'react';

const BatchRequestComponent = () => {
  const [response, setResponse] = useState(null);
  const [loading, setLoading] = useState(false);

  const sendBatchRequest = async () => {
    setLoading(true);

    const batchRequest = {
      requests: [
        { endpoint: 'getUserData' },
        { endpoint: 'getProductData' }
      ]
    };

    try {
      const res = await fetch('http://localhost:3000/batch', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(batchRequest),
      });

      const data = await res.json();
      setResponse(data.responses);
    } catch (error) {
      console.error('Error with batch request:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>Batch API Requests</h1>
      <button onClick={sendBatchRequest} disabled={loading}>
        {loading ? 'Loading...' : 'Send Batch Request'}
      </button>
      {response && (
        <div>
          <h2>Batch Response:</h2>
          <pre>{JSON.stringify(response, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

export default BatchRequestComponent;

4. Explanation of the Code

• sendBatchRequest: This function sends a POST request to the /batch endpoint, containing multiple individual requests in the requests array. Each request includes an endpoint (e.g., getUserData, getProductData).
• Batch Response: Once the response is received from the server, it’s displayed in the UI. The server sends back an array of responses, each corresponding to one of the requests in the batch.

5. Handling Errors

If a request within the batch fails, you can handle errors by checking the response from the server for individual request errors. For example, the server might send back a response like this:

{
  "responses": [
    { "data": { "id": 1, "name": "John Doe" }, "status": "success" },
    { "error": "Unknown endpoint" }
  ]
}

You can then check each individual response in the responses array and handle any errors accordingly.

const handleBatchResponse = (responses) => {
  responses.forEach((response, index) => {
    if (response.error) {
      console.error(`Request ${index + 1} failed: ${response.error}`);
    } else {
      console.log(`Request ${index + 1} succeeded:`, response.data);
    }
  });
};

6. Best Practices and Considerations

• Error Handling: Make sure the client gracefully handles individual request failures in a batch.
• Pagination and Limits: If your batch requests involve fetching large datasets, consider implementing pagination or batch size limits to avoid overwhelming the server.
• Caching: Use caching strategies to avoid repeated requests for the same data (e.g., caching responses from the batch requests).
• Performance: If you have multiple batch requests happening concurrently, consider optimizing performance by grouping them into fewer requests or prioritizing critical requests.

7. Advanced Features

• Batch Request with Different Methods: Some batch request implementations allow mixing different HTTP methods (GET, POST, PUT, DELETE) in the same batch. You can extend the server-side logic to handle different methods in one batch.
• Retry Logic: Implement retry logic for failed batch requests to ensure the reliability of critical operations.
• Optimistic UI Updates: For a better user experience, you can update the UI optimistically while waiting for the batch request to complete.