hydration issue when using vuex-persistedstate with many-to-many pivot model

[vesper8]

I wasn't sure whether to create this issue on the main vuex-orm or here because I'm not sure which part is the guilty party.

I'm using the latest versions of both vuex-orm (0.33.0) and this plugin-axios (0.9.0)

I've followed the guide in order to create many-to-many relationships

I have 4 models in all User Project Skill UserSkill

The relationship between user and project is one-to-many and this didn't cause me any issues. The relationship between User and Skill is many-to-many

I use plugin-axios to populate all of these models.. it all works.. magically.. I do a single call to my user endpoint, which returns relationships in a way vuex-orm is friendly to, and bam, all my users, projects and skills are correctly populated

The problem occurs when I try to persist this to my state using vuex-persistedstate

It does a good job of saving the states for my User, Project and Skill models, but it fails with UserSkill.

At least, at first I thought it was failing completely because following a js error, if I inspect the state using the vue devtools, it appeared that the entities.userSkill.data is completely empty

I am getting this error:

Basically it fails to hydrate the pivot model.. for some reason

Upon closer inspection, it turns out that vuex-persistedstate does save the data.. as I found out by doing this:

console.log(this.$store.state.entities.userSkill.data);

But it fails to hydrate and this breaks everything

I have no idea why this is happening, however I did find a workaround. I am now running this:

    fixPivotHydration() {
      Object.keys(this.$store.state.entities.userSkill.data).forEach((userSkill) => {
        UserSkill.insertOrUpdate({
          data: this.$store.state.entities.userSkill.data[userSkill],
        });
      });
    },

And problem goes away

This is my UserSkill model in case it may be helpful.. but I copied it from your guide

import {
  Model,
} from '@vuex-orm/core';

export default class extends Model {
  static entity = 'userSkill'

  static primaryKey = ['userId', 'skillId']

  static fields() {
    return {
      userId: this.attr(null),
      skillId: this.attr(null),
    };
  }
}

Let me know if you need any other details in order to get to the bottom of this

Thanks

[kiaking]

Thanks for the report! Hmmm... Not sure why. I have never used vuex-persistedstate myself, so hard to tell. Is it possible for you to create a reproducible code for this? I need to look into how persisted state works.

[vesper8]

Hey @kiaking

I've gone ahead and created a reproducible demo here https://github.com/vesper8/vuex-orm-axios-test

it uses https://my-json-server.typicode.com to mock the API

On first run you see it correctly populates all models and their relationships, upon reload it detects that the data is already persisted with vuex-persistedstate and tries to load it from there

It loads it correctly, but if you comment out this.fixPivotHydration(); on line 43 of Home.vue, it will throw the error I mentioned above.

Hope that helps you come up with a fix!

Thanks a lot

[vesper8]

@kiaking have you had a chance to look into this? you should be able to reproduce it easily with my sample repo.. in which case you could officially mark this as a bug?

[kiaking]

@vesper8 Sorry for taking so long. I just haven't had time yet. I'll try looking into it soon!

[cuebit]

@kiaking I could reproduce your issue. This plugin isn't the culprit I don't believe. Updating @vuex-orm/core to v0.34.0 resolved the issue for me. Maybe attempt that first and see if this is the case for you?

[kiaking]

@cuebit Ah... Maybe it fixed because now we're storing data as POJO. So, I'll be closing this one for now. Please feel free to open another issue if there's anything!

[vesper8]

I can confirm that changing the package.json to request ^0.34 has fixed this issue

[kiaking]

@vesper8 Thank you so much for the confirmation! 👍 💕