id not returned when dispatching insert

[thokkane]

I'm getting undefined for the id when calling this simple createDoc function. I'm using two path variables for the module. Using version 1.35.2.

methods:{
        async createDoc(){
            const id = await this.$store.dispatch('media/insert', {
                name:'Test',
            })
            console.log(id)
        },
}

Is there a bug?

[mesqueeb]

@thokkane thanks for your ticket!! that could be a bug. I definitely intended to return the ID. I'll look into it asap!!

[thokkane]

@mesqueeb good to check this also for the moduleName/set

[thokkane]

@mesqueeb did you have a chance to look at this?

[mesqueeb]

@thokkane Sorry, I thought I found the bug, but the tests still pass.

I further looked into the code, it might be perhaps when you use hooks. Do you use hooks? If you do, at the very bottom of the hook, can you try and return the updateStore(doc) function?

Let me know!

[thokkane]

@mesqueeb I have the following for hooks. Still getting undefined for the id.

const mediaModule = {
    firestorePath: 'accounts/{accountId}/brands/{brandId}/media',
    firestoreRefType: 'collection', 
    moduleName: 'media',
    statePropName: 'media',
    serverChange: {
        modifiedHook: function (updateStore, doc, id, store, source, change) { 
            updateStore(doc); 
        },
        addedHook: function (updateStore, doc, id, store, source, change) { 
            updateStore(doc); 
        },
        removedHook: function (updateStore, doc, id, store) { 
            updateStore(doc); 
        }
    },
    sync: {
        insertHook: function (updateStore, doc, store) { 
            updateStore(doc)
        },
        patchHook: function (updateStore, doc, store) { 
            updateStore(doc)
        },
        deleteHook: function (updateStore, id, store) { 
            updateStore(id) 
        },
    }
}

[mesqueeb]

@thokkane yes i see now, it's because you need to return updateStore(doc).

But in your case, if you are not using the hooks you don't even need to include them at all...

const mediaModule = {
    firestorePath: 'accounts/{accountId}/brands/{brandId}/media',
    firestoreRefType: 'collection', 
    moduleName: 'media',
    statePropName: 'media',
    serverChange: {
        modifiedHook: function (updateStore, doc, id, store, source, change) { 
            return updateStore(doc); 
        },
        addedHook: function (updateStore, doc, id, store, source, change) { 
            return updateStore(doc); 
        },
        removedHook: function (updateStore, doc, id, store) { 
            return updateStore(doc); 
        }
    },
    sync: {
        insertHook: function (updateStore, doc, store) { 
            return updateStore(doc)
        },
        patchHook: function (updateStore, doc, store) { 
            return updateStore(doc)
        },
        deleteHook: function (updateStore, id, store) { 
            return updateStore(id) 
        },
    }
}

or even better:

const mediaModule = {
    firestorePath: 'accounts/{accountId}/brands/{brandId}/media',
    firestoreRefType: 'collection', 
    moduleName: 'media',
    statePropName: 'media',
    // serverChange: {},
    // sync: {}
}

PS: I'm working hard on version 2.0 and working with events & hooks is way less confusing, so you won't have to worry about these things in the future. 😅

_{--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If you use this library in your projects, you can support the maintenance of this library by a small contribution via Github 💜.
You can also reach out on twitter if you want a one-on-one coding review/lesson. 🦜}