Remove caching from wp_remote_get calls from custom plugin

Question

If you want to make sure the data bypasses any front-end caching, you should use AJAX to request the data and print it on the page.

What I’d suggest is keeping your shortcode, but using AJAX to update it but creating a REST API endpoint. To do this you would abstract away the API request into its own function, and then have the shortcode and API response both use that function:

/**
 * Function for retrieving the count from the API.
 */
function wpse_330377_get_count() {
    $request = wp_remote_get( 'https://myapi.com/count' );

    if( is_wp_error( $request ) ) {
        return false;
    }

    $body = json_decode( wp_remote_retrieve_body( $request ) );

    $statistic = $body->payload->count;

    return $statistic;
}

/**
 * Shortcode for outputting the count.
 */
function wpse_330377_count_shortcode() {
    $statistic = wpse_330377_get_count();

    return '<div id="value" class="number">'. $statistic . '</div>';
}
add_shortcode( 'real_time_count', 'wpse_330377_count_shortcode' );

/**
 * REST API endpoint for getting the count.
 */
function wpse_330377_register_rest_route() {
    register_rest_route( 
        'wpse_330377', 
        'count',
        [
            'method'   => 'GET',
            'callback' => 'wpse_330377_get_count'
        ]
    );
}
add_action( 'rest_api_init', 'wpse_330377_register_rest_route' );

Now you can use JavaScript to send a request to the new API endpoint, /wp-json/wpse_330377/count, which will give us the new value that we can use to update the #value div.

Create a JavaScript file like this, in your theme or plugin:

jQuery.get(
    {
        url: wpse330377.apiUrl,
        success: function( data ) {
            jQuery( '#value' ).html( data );
        }
    }
);

And then enqueue it and pass it the correct URL:

function wpse_330377_enqueue_script() {
    wp_enqueue_script( 'wpse_330377_count', 'URL TO SCRIPT GOES HERE', [ 'jquery' ], null, true );
    wp_localize_script(
        'wpse_330377_count',
        'wpse330377',
        [
            'apiUrl' => rest_url( 'wpse_330377/count' ),
        ]
    );
}
add_action( 'wp_enqueue_scripts', 'wpse_330377_enqueue_script' );

Just replace URL TO SCRIPT GOES HERE with the actual URL. Use get_theme_file_uri() to get the URL for a file in your theme, or plugins_url() if it’s in a plugin.

PS: Note that I’ve used wpse_330377 as a prefix and namespace in many places. You should use a prefix like this to prevent conflicts with WordPress and other themes or plugins. Ideally it would be something specific to your project.

Related Posts: