Avoid Underfetching and Overfetching in REST API

Hello, everyone! It's Arun again. As a WordPress developer, I specialize in plugin and theme development. Over the course of my work, I’ve encountered many challenges while working with the WordPress REST API, and today I want to share some insights on how to avoid two common issues: underfetching and overfetching.

What is REST API? A Quick Overview

A REST API (Representational State Transfer API) allows you to interact with a backend system and retrieve data to display on the front end. It’s an efficient way to fetch and send data between the server and the client.

If you’re a WordPress developer, you’re likely already familiar with the WordPress REST API. WordPress comes with a built-in REST API that makes it easy to retrieve content like posts, pages, and custom post types via HTTP requests. However, knowing how to efficiently use this API is key to ensuring optimal performance and data delivery.

What is Underfetching and Overfetching?

Before diving into solutions, let’s first understand underfetching and overfetching:

• Underfetching occurs when an API call does not return enough data. This can lead to the need for additional requests, which can negatively impact performance.
• Overfetching happens when an API call returns more data than necessary. Fetching excessive or irrelevant data can slow down your application and waste resources.

Both issues can harm the performance of your WordPress site, especially when dealing with large datasets or slow connections.

How to Avoid Underfetching and Overfetching

Many WordPress developers struggle with underfetching and overfetching, especially when trying to retrieve blog posts and other content efficiently. Let’s explore some strategies to optimize your REST API calls.

Here’s an example of a custom endpoint I created to fetch blog posts efficiently. This custom endpoint ensures that only the necessary data is returned, thus minimizing both underfetching and overfetching.

functions.php

<?php
// Hook into the REST API initialization
add_action('rest_api_init', function () {
    // Register custom route
    register_rest_route('custom-api/v1', '/blog-posts', [
        'methods'  => 'GET',
        'callback' => 'get_custom_blog_posts',
        'args'     => [
            'category' => [
                'required' => false,
                'type'     => 'string',
                'description' => 'Filter by category slug.',
            ],
            'count' => [
                'required' => false,
                'type'     => 'integer',
                'default'  => 5,
                'description' => 'Number of posts to retrieve.',
            ],
        ],
        'permission_callback' => '__return_true', // Allows public access
    ]);
});

/**
 * Callback function for custom blog post endpoint
 */
function get_custom_blog_posts($data) {
    $args = [
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'posts_per_page' => $data['count'] ?? 5, // Default to 5 posts
    ];

    if (!empty($data['category'])) {
        $args['category_name'] = $data['category'];
    }

    $query = new WP_Query($args);

    if (!$query->have_posts()) {
        return new WP_Error('no_posts', 'No blog posts found', ['status' => 404]);
    }

    $posts = [];
    while ($query->have_posts()) {
        $query->the_post();

        // Get featured image URL
        $featured_image = has_post_thumbnail() 
            ? get_the_post_thumbnail_url(get_the_ID(), 'full') 
            : null;

        // Get the author name
        $author_name = get_the_author();

        // Get comments count
        $comments_count = get_comments_number(get_the_ID());

        $posts[] = [
            'id'         => get_the_ID(),
            'title'      => get_the_title(),
            'content'    => apply_filters('the_content', get_the_content()),
            'excerpt'    => get_the_excerpt(),
            'image_url'  => $featured_image,
            'author'     => $author_name,
            'comments'   => $comments_count,
            'link'       => get_permalink(),
            'category'   => get_the_category(),
            'date'       => get_the_date(),
        ];
    }

    wp_reset_postdata();

    return rest_ensure_response($posts);
}
         

Explanation:

1. Custom Endpoint: I created a custom endpoint at p[ example.com/wp-json/custom-api/v1/blog-posts ] to fetch blog posts.
2. Efficient Data Fetching: The endpoint returns only the necessary data for each post. These are the data you can get. if you want more data you can modify it.

$posts[] = [
            'id'         => get_the_ID(),
            'title'      => get_the_title(),
            'content'    => apply_filters('the_content', get_the_content()),
            'excerpt'    => get_the_excerpt(),
            'image_url'  => $featured_image,
            'author'     => $author_name,
            'comments'   => $comments_count,
            'link'       => get_permalink(),
            'category'   => get_the_category(),
            'date'       => get_the_date(),
        ];        

1. Limit Data: The posts_per_page parameter is dynamic, meaning it can be controlled by the API call (via the count parameter), allowing for more flexible data retrieval.

  'count' => [
                'required' => false,
                'type'     => 'integer',
                'default'  => 5, // you can set the dynamic for post per page
                'description' => 'Number of posts to retrieve.',
            ],        

1. Error Handling: If no posts are found, the API returns a 404 error with a descriptive message.
2. For security reasons, you can enhance this with security callback functions to restrict public access to the API and ensure secure data handling.

  'permission_callback' => '__return_true', // Allows public access or you can modify with callback function for security purpose, you can replace the value as a callback.        

Conclusion

By using this approach, you can avoid underfetching and overfetching, ensuring that your WordPress site’s API is efficient and only returns the data that’s necessary. This leads to faster load times, better performance, and a more optimized user experience.

I hope you find this helpful! Feel free to use the code in your theme or plugin files to create a custom API endpoint that fits your needs. If you have any questions or need further clarification, don’t hesitate to ask in the comments!

Learning something NEW follow me, for more...Code together & grow together.....