DEV Community

Cover image for Use Strapi Transformer to make your Strapi API response more clean.
Jung Rama
Jung Rama

Posted on • Edited on

1

Use Strapi Transformer to make your Strapi API response more clean.

If you're building a web application, you may be using Strapi as your content management system. Strapi is a popular open-source headless CMS that provides a flexible and customizable content management system for building web applications. One of the key benefits of Strapi is its ability to provide and generate an API that can be used to access and manipulate content.

However, sometimes the response of the API may not be in the format that we need. In such cases, we can use Strapi Transformer to transform the API response and make it more clean and structured.

What is Strapi Transformer?
Strapi Transformer is a plugin that allows you to transform the API response using a set of predefined transformations. It provides a simple and intuitive way to manipulate the response data and get the data in the format that we need.

How to Install Strapi Transformer
The Strapi Transformer plugin is not included in the default installation of Strapi. Therefore, we need to install it manually. Here are the steps to install the Strapi Transformer plugin:

  1. Open the terminal and navigate to the root directory of your Strapi project.
  2. Run the following command to install the Strapi Transformer plugin:
npm install strapi-plugin-transformer
Enter fullscreen mode Exit fullscreen mode
  1. Once the installation is complete, restart the Strapi server using the following command:
npm run develop
Enter fullscreen mode Exit fullscreen mode

Once you have installed the Strapi Transformer plugin, you can use it to transform the API response. The plugin configuration is stored in a config file located at ./config/plugins.js. If this file doesn't exists, you will need to create it.

Minimal Configuration

module.exports = ({ env }) => ({
  // ..
 'transformer': {
    enabled: true,
    config: {
        prefix: '/api/',
        responseTransforms: {
          removeAttributesKey: true,
          removeDataKey: true,
        }
     }
  },
  // ..
});
Enter fullscreen mode Exit fullscreen mode

With this you can remove the attribute object that kinda annoying, for example :

Before :

{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Lorem Ipsum",
      "createdAt": "2022-02-11T01:51:49.902Z",
      "updatedAt": "2022-02-11T01:51:52.797Z",
      "publishedAt": "2022-02-11T01:51:52.794Z",
        "data": {
          "id": 2,
          "attributes": {
            "title": "Dolor sat",
            "createdAt": "2022-02-15T03:45:32.669Z",
            "updatedAt": "2022-02-17T00:30:02.573Z",
            "publishedAt": "2022-02-17T00:07:49.491Z",
          },
        },
    },
  },
  "meta": {},
}
Enter fullscreen mode Exit fullscreen mode

After :

{
  "data": {
    "id": 1,
    "title": "Lorem Ipsum",
    "createdAt": "2022-02-11T01:51:49.902Z",
    "updatedAt": "2022-02-11T01:51:52.797Z",
    "publishedAt": "2022-02-11T01:51:52.794Z",
    "data": {
      "id": 2,
      "title": "Dolor sat",
      "createdAt": "2022-02-15T03:45:32.669Z",
      "updatedAt": "2022-02-17T00:30:02.573Z",
      "publishedAt": "2022-02-17T00:07:49.491Z",
    },
  },
  "meta": {},
}
Enter fullscreen mode Exit fullscreen mode

If you're interested in learning more about Strapi Transformer and the various configurations it offers, you can check out the full documentation on the Strapi Marketplace. This comprehensive resource provides in-depth information about the plugin, including detailed instructions on how to set it up, customize its settings, and use it to transform API responses to meet your specific needs. Check the documentation here https://market.strapi.io/plugins/strapi-plugin-transformer

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay