Any elegant way to reduce the Unified Response Format to handle in frontend?

Questions and Answers
2

I came here to ask this same question.

I have created a sanitizeApiResponse function that looks like:

export const sanitizeApiResponse = (response) => {
    if (!response || !response.data) {
        return undefined
    }
    if (Array.isArray(response.data)) {
        const sanitized = response.data.reduce(
            (acc, curr) => {
                const item = {
                    id: curr.id,
                    ...curr.attributes,
                }
                acc.push(item)
                return acc
            },
            [],
        )
        return sanitized
    }
    const sanitized = {
        id: response.data.id,
        ...response.data.attributes,
    }
    return sanitized
}

This transforms:

{
    data: [
        {
            id: 1,
            attributes: {
                item1: 'foo',
                item2: 'bar',
            },
        },
    ],
}

Into:

{
    id: 1,
    item1: 'foo',
    item2: 'bar',
}

It also works when the response doesn’t have an array in data :grinning_face_with_smiling_eyes:

This works pretty well for basic responses but the issue comes in when we have relations or components as we have to run the same function over and over again on each relation.

It’s a pretty nasty way to have to deal with things. It feels wrong that so much sanitization needs to be performed client side.

If anyone knows of a more elegant way then let us know!

1 Like