[Storybook] Issue when storybook hot reloaded

[Vladimir Minkin]

Strange thing happening when I change and save store in story book. Not all data fetched from local store.
What I do:

1. Fetch data from remote:

export const prepareDetailsPageData = async () => {
  await DetailsPageModel.fetchFromLocal()
  console.log('> prepareDetailsPageData:', DetailsPageModel.exists())
  if (!DetailsPageModel.exists()) {
    const detailsPageUrl = 'some_url'
    const data = await DetailsPageModel.api().fetch(detailsPageUrl)
    await DetailsPageModel.createLocally({ data })
  }
}

where data is the response and DetailsPageModel looks like

export default class DetailsPageModel extends Model {
  static entity = Models.PAGE_DETAILS
  static fields () {
    return {
      $type: this.string(null),
      content: this.hasOne(DetailsPageContentModel, 'to_parent', '$type'),
      menu: this.attr(null),
      list: this.hasMany(ContentDetailsListItemModel, 'to_parent', '$id'),
      creationDate: this.string(null),
      telemetry: this.attr(null),
    }
  }

  static apiConfig = {
    actions: {
      async fetch (url) {
        const result = await this.get(`${url}`, { save: true })
        return result.response
      }
    }
  }
}

It works and looks like data stored in localstorage

And all registered correctly since data can be retrieved in a first run, store connected to storybook comonent:

export const detailsPage = () => ({
  components: { DetailsPage },
  template: `<details-page v-if="isReady"/>`,
  computed: {
    isReady: () => DetailsPageModel.exists(),
  },
  beforeUpdate: async () => {
    Navigator.init()
  },
  beforeCreate: async () => {
    await prepareDetailsPageData()
    console.log("> Storybook > DetailsPage : beforeCreate:", DetailsPageModel.query().first())
  },
  store
})

And when code in store updated, hot reloaded performed, then this:

await DetailsPageModel.fetchFromLocal()
console.log('> prepareDetailsPageData:', DetailsPageModel.exists())

show > prepareDetailsPageData: true
However the DetailsPageModel.query().first() does not return dependencies as it was before hot-reload

All dependencies are null.

Any guesses how to fix it?

[Vladimir Minkin]

And I mapped$fetch method to custom:

Vue.use(Vuex)
VuexORM.use(VuexORMAxios, { axios })
VuexORM.use(VuexORMLocalForage, {
  database,
  actions: {
    $get: 'getFromLocal',
    $fetch: 'fetchFromLocal',
    $create: 'createLocally',
    $update: 'updateLocally',
    $delete: 'deleteFromLocal'
  }
})

[Vladimir Minkin]

This does not happen when only fetch data from remote, which I actually want to skip in all subsequent updates / hot-reloads

[Falk Neumann]

I have a similar issue!

The table which is missing after refreshing the page is also not initialized after deleting indexDB.

const database = new VuexORM.Database();
database.register(MetaInformation);
database.register(FormatIndex);
database.register(Annotation);
database.register(ClipContent);
database.register(Clip);

VuexORM.use(VuexORMLocalForage, {
  database
});

const store = new Vuex.Store({
  strict: true,
  plugins: [VuexORM.install(database)]
});
 

and my Clip looks like that:

export default class Clip extends Model {
  static entity = "clip";

  static fields() {
    return {
      id: this.uid(),
      meta: this.hasOne(MetaInformation, "clipID"),
      content: this.hasOne(ClipContent, "clipID")
    };
  }
}

ClipContent is loaded properly when I query for all items. MetaInformation on the other hand is always null. Same config on both Models.

Is this Plugin dead?

[Falk Neumann]

I don´t know why yet but when I fetch the missing model in the mounted hook via this.$store.$db().model(Meta).dispatch("$fetch"); the model database gets created and also loaded correctly.
 Really weird, but maybe a good hint for debugging.