mesqueeb / vuex-easy-firestore

Easy coupling of firestore and a vuex module. 2-way sync with 0 boilerplate!
https://mesqueeb.github.io/vuex-easy-firestore
MIT License
234 stars 28 forks source link

Doc mode patch not updating the Firestore document #291

Closed xorbis closed 4 years ago

xorbis commented 4 years ago

I am new to Vuex Easy Firestore. I'ts probably my error but I can't find anything in the documentation to point me in the right direction.

This is my store module:

const tests = {
    firestorePath: "tests/{userId}",
    firestoreRefType: "doc",
    moduleName: "currentUser",
    statePropName: "data",
    namespaced: true
};

export default tests;

This is my data section:

data: () => ({
    user: {
        name: "",
        email: "",
        agreement: false
    }
})

When I mount my view I do this:

async mounted() {
    this.$store.dispatch("currentUser/fetchAndAdd", { userId: "fake_user_id" });
},

When the form is valid and submit is pressed, I do this:

async submit() {
    console.log("SAVING:", this.user);
    this.$store.dispatch("currentUser/patch", this.user);
},

And finally, this.user contains the proper form data like so:

{
    id: "fake_user_id",
    name: "John Doe",
    email: "j.doe@test.com",
    agreement: true
}

I have totally no idea how id gets set in this.user since nowhere in the code I do so and I figured the data section was split from the store data. If someone can explain that to me it would be great!

When mounted, my view creates the document with the id, created_at and created_by fields.

Also, my main question is why am I not getting any debug log on the path command issued in the submit() method. Because I am getting the console log just above it.

Also, the data makes it to the store as a mutation... image

But never makes it to Firestore

mesqueeb commented 4 years ago

Can enable the logging of my library and check if there are logs or errors ?

Sent with GitHawk

xorbis commented 4 years ago

image

As you can see, no log.

xorbis commented 4 years ago

Here's the package.json

{
  "name": "ninetales",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "deploy": "firebase deploy",
    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locale/**/*.json'",
    "install": "cp node_modules/first-input-delay/dist/first-input-delay.min.js ./public/",
    "prebuild": "npm run install",
    "predeploy": "npm run build"
  },
  "dependencies": {
    "@leadfox/common": "0.0.45",
    "core-js": "^3.6.4",
    "firebase": "^7.8.1",
    "firebase-admin": "^8.9.2",
    "firebase-functions": "^3.3.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.11",
    "vue-i18n": "^8.15.3",
    "vue-router": "^3.1.5",
    "vuetify": "^2.2.11",
    "vuex": "^3.1.2",
    "vuex-easy-firestore": "^1.35.2"
  },
  "devDependencies": {
    "@leadfox/eslint-config": "^0.1.5",
    "@types/jest": "^25.1.2",
    "@types/webpack": "^4.41.5",
    "@typescript-eslint/eslint-plugin": "^2.19.0",
    "@typescript-eslint/parser": "^2.19.0",
    "@vue/cli-plugin-babel": "^4.2.2",
    "@vue/cli-plugin-e2e-cypress": "^4.2.2",
    "@vue/cli-plugin-eslint": "^4.2.2",
    "@vue/cli-plugin-pwa": "^4.2.2",
    "@vue/cli-plugin-router": "^4.2.2",
    "@vue/cli-plugin-typescript": "^4.2.2",
    "@vue/cli-plugin-unit-jest": "^4.2.2",
    "@vue/cli-plugin-vuex": "^4.2.2",
    "@vue/cli-service": "^4.2.2",
    "@vue/eslint-config-standard": "^5.1.1",
    "@vue/eslint-config-typescript": "^5.0.1",
    "@vue/test-utils": "1.0.0-beta.31",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.1.2",
    "first-input-delay": "^0.1.3",
    "node-sass": "^4.13.1",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.7.5",
    "vue-cli-plugin-i18n": "^0.6.1",
    "vue-cli-plugin-vuetify": "^2.0.4",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3"
  }
}
mesqueeb commented 4 years ago

I'm not sure what's wrong. I'm also not 100% sure what you are trying to do exactly and where it is failing... 😰

BTW, userId is auto-filled in when you use firebase auth. If you want to manually pass a userId, can you try using a different custom variable name instead? eg. change all places you wrote userId by myUserId and see if it works?

If not, can you share your repo?

xorbis commented 4 years ago

It's a simple test form that fetches a predetermined document with the fake_user_id ID and then saves it when the form is submit. The fetchAndAdd works fine, the path does nothing.

No authentication is setup or used in this test. Rules are read write open for all collections. I will try some more stuff this PM as I was able to fetch and update in collection mode but not in document mode.

I will try to setup a small repo with reproduction if all else fails.

xorbis commented 4 years ago

image

Found it, replacing { userId } with { id } fixed it, I did not know { userId } was a special case. Are there other reserved path tags? If so, documenting them would help avoiding this problem.

Thanks!