struggling with initial setup, data not transforming

[stephhappens]

Hi 👋

I have been wrestling all day with the new Strapi version. I used v3 and understood what was happening with the JSON response. The new version seems needlessly complicated 😿. I found your plugin on a forum post. I'm not sure if I am missing a step, but my data is not being transformed (as far as I can tell).

• I installed and added the plugin config as you wrote in the readme. Package.json looks good. Config is in a top-level folder.
• I also restarted both servers.
• My console output remains the same.
  

In v3 I was able to .map over my response, but with attributes being an object inside of data now, I'm lost.

If it helps to know, I am receiving the data with a fetch request and using getStaticProps to connect the data to the front-end. The map function is aware there are five items in the array, but can't access anything further.

Is there something else I need to change? I'm using Strapi and Next.js. I was ecstatic to find this after a long day. I hope I can get it working. Thank you for your help 🙇‍♀️.

[ComfortablyCoding]

Can you confirm that the plugin config is in a file called plugins.js and not plugin.js and that both transforms are enabled in the plugin config?

[robertocommit]

Hello, same problem here, it does not work... I have been trying a couple of times, but same result

[stephhappens]

It's in the correct file format and both are enabled. After toggling the true or false settings and the server, it does seem to have removed the data key, but the attributes remain an object and persist despite the changes. I currently have the data key set to false and the attributes key to true.

For my case, I was hoping the attributes key is removed and the data key remained. Here's what I see now. Thanks for looking at it!

[robertocommit]

@stephhappens I am reluctant to use unofficial plugins in production

[stephhappens]

@dolphinxyz that's probably a good call, but not really relevant as to why I created the issue. I'm grateful someone tried to solve a problem that Strapi itself doesn't even have docs or a solution for. It stinks I'm having issues because it does seem to work for folks!

You should talk to Strapi about your feedback and not an issue requesting help. https://forum.strapi.io/t/discussion-regarding-the-complex-response-structure-for-rest-graphql-developer-experience/13400/74?page=2

[ComfortablyCoding]

@stephhappens I just installed the latest strapi version and cannot replicate your issue. The data gets transformed per the settings. The changes I made once the project was created was to add the content type, install the plugin, add the plugins.js file and add the plugin settings.

My settings are

// ./config/plugins.js
module.exports = ({ env }) => ({
  // ..
  transformer: {
    enabled: true,
    config: {
      prefix: "/api/",
      responseTransforms: {
        removeAttributesKey: true,
        removeDataKey: false,
      },
    },
  },
  // ..
});

My response

{
  "data": [
    {
      "id": 1,
      "title": "lorem ipsum",
      "content": "Dolor sat amet",
      "createdAt": "2022-09-02T23:10:13.698Z",
      "updatedAt": "2022-09-02T23:10:14.834Z",
      "publishedAt": "2022-09-02T23:10:14.828Z"
    },
    {
      "id": 2,
      "title": "consectetur adipiscing elit",
      "content": "ed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
      "createdAt": "2022-09-02T23:10:55.314Z",
      "updatedAt": "2022-09-02T23:23:32.822Z",
      "publishedAt": "2022-09-02T23:10:56.393Z"
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 2
    }
  }
}

Is their some sample repository that i can take a look at where the issue is occurring?

[robertocommit]

At the core this fantastic plugin has these functions. I am applying them in other ways since I cannot make the plugin work

function traverse(data) {
    if (_.has(data, 'attributes')) {
        return traverse(removeObjectKey(data, 'attributes'));
    }
    if (_.has(data, 'data')) {
        return traverse(removeObjectKey(data, 'data'));
    }
    _.forEach(data, (value, key) => {
        if (!value) return;
        if (_.isObject(value)) {
            data[key] = traverse(value);
        }
    });
    return data;
}

const removeObjectKey = (object, key) => ({
	id: object.id,
	...object[key],
});

[Bligoubloups]

Hello !

In the middleware/transform.js the type of ctx.body is string.
I had to JSON.parse it in order to be able to store the result of getPluginService in the ctx.body['data'].

if (isAPIRequest(ctx)) {
	console.log(typeof ctx.body) // string, this should be an object
	const body = JSON.parse(ctx.body); // so I parse it
	const { data } = body
	if (data) {
		body['data'] = getPluginService('transformService').response(settings, data);
		ctx.body = body
	}
}

This seems to fix the problem for me. Not tested on complex queries.

When I use Rest, it is an object. I must have something wrong with my config but don't know what.

[ComfortablyCoding]

@Bligoubloups

When I use Rest, it is an object. I must have something wrong with my config but don't know what.

Does this mean it's a string when you are using graphql? If that is the case then I am aware of this. Graphql is not currently supported as the schema editing is not entirely possible (or at least I have not found a way to do so).

[Bligoubloups]

Yes I'm using graphql.
Didn't know the plugin didn't handle it.

[ghost]

So this gave a bit of trouble when starting a new project then I realized the following...

1. Since the front end was Angular I had created the project with TypeScript HOWEVER I followed the instructions and created the plugins.JS NOT plugins.ts
2. I also copied the minimal configuration and then added the properties in the config section, HOWEVER, I did not add the prefix: "/api/", giving me a minimal plugins.ts file as below, which works like a charm
   module.exports = ({ env }) => ({
   // ..
   transformer: {
   enabled: true,
   config: {
   prefix: "/api/",
   responseTransforms: {
   removeAttributesKey: true,
   removeDataKey: true,
   },
   },
   },
   // ..
   });