Help with normalize? (Ember & Supabase)

Ember Data
#1

Hello. So my backened (Supabase) returns this:

[
    {
        "id": "259f46fd-3321-4cc9-ad5e-6d6ec880f7f1",
        "date_added": "2022-12-31T00:03:14.618585+00:00",
        "name": "8A Science",
        "students_num": 12,
        "archived": false,
        "tracker": false,
        "google_course_id": null,
        "course_spec": null,
        "user_id": "148758c9-518e-4967-83df-32509372eab7",
        "colour": null
    },
    {
        "id": "62a6a085-604b-4600-8cc4-59a8c9af284a",
        "date_added": "2022-12-31T00:03:30.010963+00:00",
        "name": "9X1 Physics",
        "students_num": 25,
        "archived": false,
        "tracker": false,
        "google_course_id": null,
        "course_spec": null,
        "user_id": "148758c9-518e-4967-83df-32509372eab7",
        "colour": null
    }
]

I attempted to normalize like this:

import RESTSerializer from '@ember-data/serializer/rest';

export default class ApplicationSerializer extends RESTSerializer {
    normalizeResponse(store, primaryModelClass, payload, id, requestType) {
        // parse the response data from the server and return it in the format that Ember Data expects
        let newPayload = {
          data: payload.map(item => {
            let attributes = JSON.parse(JSON.stringify(item));
            delete attributes.id;

            return {
              id: item.id,
              type: primaryModelClass.modelName,
              attributes: attributes
            }
          })
        }

        return super.normalizeResponse(store, primaryModelClass, newPayload, id, requestType);
    }
}

…and returns empty Proxy { }. Ember Inspector also shows no data. I’m so confused how normalize works - haven’t even try to serialize yet!

Any ideas?

#2

Hi @syedkhairi! You can probably use the JSONSerializer instead of RestSerializer and not have to do as much customization. In fact you may not have to do any. I think your payloads match JSONSerialize the best.

RestSerializer is basically just a payload wrapper different from JSONSerializer (which is confusingly named given there is also JSONAPISerializer), and JSONAPISerializer is the “normalized format” that you’re trying to get to.

As for why the above code wasn’t doing what you expected my guess at a quick glance is that you’re actually returning a JSON:API format record, but then calling super on it which runs it through the RestSerializer, which expects a payload in this format:

{
  model_names: [
    {
        "id": "259f46fd-3321-4cc9-ad5e-6d6ec880f7f1",
        "date_added": "2022-12-31T00:03:14.618585+00:00",
        "name": "8A Science",
        "students_num": 12,
        "archived": false,
        "tracker": false,
        "google_course_id": null,
        "course_spec": null,
        "user_id": "148758c9-518e-4967-83df-32509372eab7",
        "colour": null
    },
  ]
}

or something like that. Basically you’re taking a JSONSerializer format payload, turning it into a JSONAPISerializer format payload, then passing it to the RestSerializer when you could cut out at least one of the middlemen if not both.

I’d try using JSONSerializer and just extending it without overriding anything, or if you want to muck with serialization and keep your code above maybe extend JSONAPISerializer instead.

2 Likes