Saving a record to json file

Ember Data
1

Hi,

I’m building a small application just for me. So first I wanted to test on a small app what I can do with Ember Data, but I’m stuck on saving a record to json file. At the moment the json file is very simple, it has two records, and it reads:

{
    "data": [
        {
            "type": "person",
            "id": "albert-einstein",
            "attributes": {
                "name": "Albert Einstein",
                "field": "Gravity",
                "address":"Switzerland"
            }
        },
        {
            "type": "person",
            "id": "freeman-dyson",
            "attributes": {
                "name": "Freeman Dyson",
                "field": "Quantum Field Theory",
                "address": "Australia"
            }
        }
    ]
}

I’ve also defined a model:

export default class PersonModel extends Model {
    @attr('string') name;
    @attr('string') field;
    @attr('string') address;
}

On one page of the app, I load the data from the store and display it without problems. However, on another page I create a new record and I can see it in the store (and in Ember Inspector) but when saving the record I get an error.

For simplicity, I added the creation and saving of the new record in the route so whenever I click the link it creates a new record.

export default class InputRoute extends Route {
    async model() {
        let newRecord = this.store.createRecord('person', {
            name: 'Enrico Fermi',
            field: 'Quantum Physics',
            address: 'Italy'
        });

        newRecord.save();

        return newRecord;
    }
}

But I systematically get the following error:

index.js:64 Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined
    at Cache.func (index.js:64)
    at Cache.get (index.js:761)
    at decamelize (index.js:167)
    at Cache.func (index.js:32)
    at Cache.get (index.js:761)
    at Object.dasherize (index.js:190)
    at normalizeModelName (-private.js:62)
    at detectMerge (-private.js:661)
    at IdentifierCache.updateRecordIdentifier (-private.js:468)
    at Store.didSaveRecord (-private.js:8774)

I’m really not sure where to look, the guides only show reading and displaying the data. I’m using the default serializer

export default class ApplicationSerializer extends JSONAPISerializer {
}

because the json file is in the appropriate format. I’m assuming something this simple should just work, so I must be missing something obvious but I can’t figure it out.

Thanks,

2

Hi @mkmkmk, welcome! I think the problem is mostly that Ember Data is meant to work with an API and writing a file isn’t going to give it everything it expects. Ember Data is highly configurable so you could probably get this to work… but there are probably also better options.

The super rentals tutorial (if you’ve seen it) uses static files for fixtures because they’re easy to start with and they work really well for read operations. Unfortunately when you start trying to write data things get a little more complicated. Ember Data expects a POST/PUT/PATCH response to contain a full record. The API is always the source of truth for data and so when you write a record with Ember Data it wants the full record back so it makes sure the store is up to date with the real record from the backend. So in this case if you’re writing to a file your “API” probably isn’t functioning how Ember Data expects. And actually if you’re just using the default adapter there’s nothing to handle saving the file anyway… so I’m not even sure what this would do…

I would highly recommend using mirage for mocking an API. It’s much more sophisticated and works really well with Ember Data. You can use Fixtures for static data, or you can create Factories and dynamically create data in a “scenario”. It also allows you to define “resources” and/or specific PUT/PATCH/POST handlers so your “API” will behave just like a real one (aka how Ember Data expects).

If your end goal is really to save data to local disk I’d consider using local storage or indexedDB instead of raw files. There are addons for both (local storage and indexedDB that provide Ember Data adapters.

3

Hi Dan,

Thanks for the in-depth response, now I understand much better what is going on. I’ll go with your suggestion then.

Thanks again