Help with normalize? (Ember & Supabase)

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?

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

Thanks @dknutsen - you’re correct!

It works in template and showing the data - however in console it shows as empty and using Ember Inspector it doesn’t show as it usually does in the Data tab with the model name and attributes. What should I do/add so Ember can do its own thing natively?

Can you provide a little more co text about the console and store stuff you’re expecting? And maybe the code that’s loading the data? Seems weird that it would render but not be in the store.

Prior to Supabase where I use RESTAdapter, RESTSerializer and EmbeddedRecordMixin (classic Express backend), it shows data as expected in store and appear in Ember Inspector:

With Supabase using method previously which works however Inspector shows empty in Data tab. And console shows the model records as Proxy.

What does this mean and why are the two different?

New user so can’t post/embed more than 1 photo. :frowning:

Check out the serializer that is in ember-supabase: ember-supabase/supabase.ts at main · knownasilya/ember-supabase · GitHub