adding-a-view-counter-in-strapi-cms-with-a-custom-api-request

If you're working on a Strapi CMS project, chances are you'll need custom API requests for specific operations. Here we will see how you can add custom api request to Strapi CMS for any specific operation.

Example Scenario:

Imagine you're building a blog or article-based website. Strapi already provides essential CRUD functionalities, but what if you want to track article views?

Now, here's the challenge:

Strapi allows role-based permissions, but granting public users the ability to update your articles isn’t a secure approach.

Creating a separate schema just for views isn't the most efficient solution either.

So, what’s the best way to handle this? I have the answer—let’s dive in!

Article Schema

Title
Slug
Post
Views
Date
Tags
…etc

Step 1: Create a Collection Type

In the Content-Type Builder, create a new collection type called Article.

Step 2: Locate the Generated Folder

Once created, Strapi will generate a folder at the following path: 📂 src/api/article

Step 3: Modify the Controller

Navigate to the controller folder and open the article.ts file:  src/api/article/controllers/article.ts

Now, update the file with the following code:

import { factories } from '@strapi/strapi'

export default factories.createCoreController('api::article.article',({strapi})=>({
    async updateViewCount(ctx) {
        try {
          const { id } = ctx.params;
          const article = await strapi.db.query("api::article.article").findOne({
            where: { id },
            select: ["Views"],  
          });
    
          if (!article) {
            return ctx.notFound("Article not found");
          }
          const updatedArticle = await strapi.db.query("api::article.article").update({
            where: { id },
            data: {
                Views: (article.Views || 0) + 1,
            },
          });
    
          return ctx.send({ message: "View count updated", data: updatedArticle });
        } catch (error) {
          console.error("Error updating view count:", error);
          return ctx.badRequest("Failed to update view count");
        }
      },
}));

Granting Permission to Update View Count

Once you've added the updateViewCount entry, follow these steps to enable public access:

1. Navigate to Permissions: 📍 Path: Settings → USERS & PERMISSIONS PLUGIN → Roles → Public → Article

2. Enable updateViewCount:

Find updateViewCount under the Article collection.

Check the box to allow public users to update the Views field.

By enabling this, you permit public users to increment the view count without exposing other sensitive fields.

Find API Path for Frontend Requests

Click on the settings (⚙️) icon next to the permission entry. This will display the API endpoint, which you can use to send update requests from your frontend application.

Updating the View Count via API

API Endpoint:

📌 /api/articles/:id/view

How It Works:

When making this request, you must send the article ID as a parameter.

Each request will increment the Views count by +1 in the database.

Prevent Multiple Requests on Page Refresh

To avoid unnecessary API calls (e.g., refreshing the page repeatedly increasing the count), you can use sessionStorage in your frontend:

const updateViewCount = async (articleId) => {
  const viewedKey = `viewed_${articleId}`;

  // Check if the view has already been counted in this session
  if (sessionStorage.getItem(viewedKey)) {
    return;
  }

  try {
    await fetch(`/api/articles/${articleId}/view`, {
      method: "POST",
    });

    // Mark as viewed in this session
    sessionStorage.setItem(viewedKey, "true");
  } catch (error) {
    console.error("Failed to update view count:", error);
  }
};

// Call this function when the article is loaded
updateViewCount(articleId);