[MST] Loading Data from the Server using lifecycle hook

Posted 2020-10-22 Answer1215

Let‘s stop hardcoding our initial state and fetch it from the server instead.

In this lesson you will learn:

• Set up basic data fetching
• Leverage the afterCreate lifecycle hook to automatically run any setup logic a model instance needs to do after creation

 

export const Group = types
    .model({
        users: types.map(User)
    })
    .actions(self => ({
        // lifecycle hook
        afterCreate() {
            self.load()
        },
        load: flow(function* load() {
            const response = yield window.fetch(`http://localhost:3001/users`)
            applySnapshot(self.users, yield response.json())
        })
    }))