DEV Community

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

Posted on • Updated on

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

Top comments (0)