Ember Data Serializer & Adapter with Supabase returns empty (Proxy { })

86 Views Asked by At

Struggling to create my customised adapter & serializer to integrate Supabase, how I'm stuck why no data in Ember Data.

Trying out with a simple findAll() method. See below:

Service ⬇️:

export default class SupabaseService extends Service {
  client;

  constructor() {
    super(...arguments);
    const { url, key } = ENV.supabase;
    const supabase = createClient(url, key);
    this.client = supabase;
  }
}

Model ⬇️:

export default class CourseModel extends Model {
  @attr('string') name;
  @attr('date') date_added;
}

Adapter ⬇️:

export default class ApplicationAdapter extends RESTAdapter {
  @service supabase;

  async findAll(store, type, neverSet, snapshotRecordArray) {
    return new Promise(async (resolve, reject) => {
      try {
        const { data, error, status } = await this.supabase.client
          .from(pluralize(type.modelName))
          .select('*');
        
        if (error) {
          reject(error);
        } else {
          resolve(data);
        }
        
      } catch (error) {
        reject(error);
      }
    });
  }
}

Serializer ⬇️:

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);
}

✅ The service works fine. The adapter manage to get data and returns as follows:

[
    {
        "id": "259f46fd-3321-4cc9-ad5e-6d6ec880f7f1",
        "date_added": "2022-12-31T00:03:14.618585+00:00",
        "name": "Science"
    },
    {
        "id": "62a6a085-604b-4600-8cc4-59a8c9af284a",
        "date_added": "2022-12-31T00:03:30.010963+00:00",
        "name": "Physics"
    }
]

The serializer newPayload to follow JSON API schema, returns:

{
    "data": [
        {
            "id": "259f46fd-3321-4cc9-ad5e-6d6ec880f7f1",
            "type": "course",
            "attributes": {
                "name": "Science",
                "date_added": "2022-12-31T00:03:14.618585+00:00"
            }
        },
        {
            "id": "62a6a085-604b-4600-8cc4-59a8c9af284a",
            "type": "course",
            "attributes": {
                "name": "Physics",
                "date_added": "2022-12-31T00:03:30.010963+00:00"
            }
        }
    ]
}

But the problem is no data in store. Logging model in template shows empty Proxy {}.

I have no idea why. Ember Inspector shows no model in Data.

Any suggestions?

0

There are 0 best solutions below