Probably I'm doing something wrong, but I'm sure you know what ;)

https://jsfiddle.net/51vrmud1/1/

Generates: TypeError: Cannot read property 'name' of null because user.agency is null.

Seems like the new version is breaking my plugin:

user.$dispatch('persist');

doesn't work: vuex.esm.js:417 [vuex] unknown action type: entities/users/persist :(

With 0.17 it worked.

As already discussed in #73 the update action should also return the updated record(s) like the other actions. This would streamline the action API.

Like the other changes this shouldn't break existing applications?

Hello,

Great job on this package. It really looks promising.

One thing that I've been looking for is ability to remove item. How can I do that?

For some datasets, the primary key may not be a single field, but a composite of multiple fields.

For example, in SQL you might define a table with a composite primary key like

CREATE TABLE `voting` (
  `QuestionID` int(10) unsigned NOT NULL,
  `MemberId` int(10) unsigned NOT NULL,
  `vote` int(10) unsigned NOT NULL,
  PRIMARY KEY  (`QuestionID`, `MemberId`)
);

It would be nice if vuex-orm supported composite primary keys so existing datasets with these keys don't need to be altered to include a single field primary key.

Hi,

In your GitBook example you use a static class property to identify the entity:

export default class User extends Model {
        static entity = 'users'

        static fields () { ... }
}

This may not be recognized in most JS environments/linters/post-processors and throw an exception. It may be worth defining it as a static getter, via the static method:

export default class User extends Model {
        static get entity () {
                return 'users'
        }

        static fields () { ... }
}

Kind regards,
Adam

I looked at your documentation and tried to implemented the Many to Many relationship.

It seems to break if I want to insert new data that does not have the relationships included.

Here is a sample code I forked from another post :-)

https://codesandbox.io/s/n7kvyzrj8p

From issue #37.

Add feature to hook into Query's process method.

To do this, I'm thinking to add the following lifecycle.

1. beforeProcess
2. beforeWhere
3. beforeOrderBy
4. beforeLimit
5. beforeGet

function install ({ Query }) {
  // Execute callback before Vuex ORM sort the record. The `records` are
  // the filtered data by `where` method.
  Query.on('beforeOrderBy', (records) => {
    // Should return modified records.
    return // Do something with record.
  })
}

I have a getter setup in my model and I'm trying to get data that is being used in a relation but it's not appearing. I think it would be great for this data to appear in the getter.

I also have the relation setup in my query so the data is there.

Is there a way, to use defined fields as default values, if the create or insert-method doesn't contain all keys?

Let me give you an example:

Model:

export default class User extends Model {
  // This is the name used as module name of the Vuex Store.
  static entity = 'user'

  static primaryKey = 'id'

  // List of all fields (schema) of the post model. `this.attr` is used
  // for the generic field type. The argument is the default value.
  /* eslint-disable camelcase */
  static fields () {
    return {
      id: this.attr(null),
      created: this.attr(null),
      lastLogin: this.attr(null),
      roleId: this.attr(null),
      roleName: this.attr(null),
      username: this.attr(''),
      email: this.attr(''),
      gender: this.attr(null),
      firstname: this.attr(''),
      surname: this.attr(''),
      street: this.attr(''),
      zip: this.attr(''),
      city: this.attr(''),
      mobile: this.attr(''),
      phone: this.attr(''),
      online: this.attr(false),
      inactive: this.attr(false)
    }
  }
}

Insert:

const users = [{
  id: '144432',
  username: 'foobar'
}]

store.dispatch('entities/user/create', { data: users })

With this, the store only contains id and username for this entity, but I'd need all the other keys.

Hi @kiaking,

Is there any way to use mutated value inside of the where clause?
I have a datetime attributes for which I use mutators to convert them to moment objects. It would be nice to use these moment objects inside my where clause so that I can simply do something like this: .where(record => record.started_at.isBetween(self.startTime, self.endTime)). Of course I can convert record.started_at to moment object inside of where clause but I figured that maybe mutators will cover this case.

Is it possible, to set a where-condition for relationships?
Your documentation covers the case to filter the relationship-elements, but i want to filter the main-element depending wether at least one relationship-element exists or not.

Here's an example:

user.js:

import { Model } from 'vuex-orm'
import Absence from './absence'

export default class User extends Model {
  // This is the name used as module name of the Vuex Store.
  static entity = 'user'

  static primaryKey = 'id'

  static fields () {
    return {
      id: this.attr(null),
      username: this.attr(''),
      absences: this.hasMany(Absence, 'userId')
    }
  }
}

absence.js:

import { Model } from 'vuex-orm'

export default class Absence extends Model {
  // This is the name used as module name of the Vuex Store.
  static entity = 'absence'

  static primaryKey = 'id'

  static fields () {
    return {
      id: this.attr(null),
      userId: this.attr(null),
      beginning: this.attr(null),
      end: this.attr(null),
      reason: this.attr('')
    }
  }
}

modules/user.js:

export default {
  getters: {
    absentUsers: (state, getters) => 
        getters['entities/user/query']()
          .with('absences')
          .where('absences', ???)
          .get()
  }
}

See https://jsfiddle.net/51vrmud1/12/ and click on one of the Xs.

Expectation: User will be removed from the list.
Actual behavior: Nothing happens.

Hi,
Is there a way to define unilateral hasOne relation without foreignKey ?

Great package!
Thanks.

Hi,

First thanks for your awesome plugin and forgive my english please !

If I create an entity and omiting the relationship property, the entity is added to the store without error. But when I try to get the entity with it relation, I'm getting the following error "TypeError: Cannot read property 'map' of undefined".

I think it come from a lodash method and to solve that issue we must create default fields (as described in the model) not existing on entity creation. This could also resolve the issue #25

Here's an example :

import Post from './Post'

export default class User extends Model {
  static entity = 'user'

  static fields () {
    return {
      id: this.attr(null),
      username: this.attr('')
      posts: this.hasManyBy(Post, 'posts')
    }
  }
}

const data = {
  id: 1,
  username: 'Test'
}

store.dispatch('entities/user/create', { data })

The above code doesn't throw an error, but if I call the getter below, it will throw the error "TypeError: Cannot read property 'map' of undefined"

store.getters['entities/user/query']().with('posts').get()

Currently to fix this error the data should contain the empty array property "posts" as following :

const data = {
  id: 1,
  username: 'Test',
  posts: []
}

I think it woul be a huge improvement, if vuex-orm could provide the following functions:

• limit
• offset
• sortBy
• sortDir

I hope you can see my motivation behind this :)
If you have a large amount of entities, you might want to paginate them. To be able to do this nicely with vuex-orm, you'd need the functions above.

dispatch('entities/deleteAll') throws the following error, when there are empty entities:

TypeError: Cannot read property 'entity' of undefined
    at Store.deleteAll (vuex-orm.esm.js?e0cb:4928)
    at Array.wrappedActionHandler (vuex.esm.js?68ac:704)
    at Store.dispatch (vuex.esm.js?68ac:426)
    at boundDispatch (vuex.esm.js?68ac:332)
    at Store.resetState (actions.js?ebc3:73)
    at Array.wrappedActionHandler (vuex.esm.js?68ac:704)
    at Store.dispatch (vuex.esm.js?68ac:426)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?68ac:332)
    at VueComponent.mappedAction (vuex.esm.js?68ac:880)
    at VueComponent.boundFn [as resetState] (vue.runtime.esm.js?40f7:189)

Hi there, thanks for the great plugin for Vuex. I'm still struggling to get it working, unfortunately.

Apologies in advance, I've been going through the docs and trying out the example calls to Vuex ORM: https://vuex-orm.gitbooks.io/vuex-orm/store/retrieving-data.html

I must be doing something wrong...

Given the following Models:

App Model

import { Model } from '@vuex-orm/core'
import Workspace from './Workspace'

export default class App extends Model {
  static entity = 'apps'

  static fields () {
    return {
        workspaces: this.hasMany(Workspace, 'appId'),
        workspaceLoaded: this.attr(false)
    }
  }
}

Workspace Model

import { Model } from '@vuex-orm/core'
import Query from './Query'
import App from './App'

export default class Workspace extends Model {
  static entity = 'workspaces'

  static fields () {
    return {
        id: this.attr(null),
        appId: this.attr(null),
        app: this.belongsTo(App, 'appId'),
        name: this.attr('Workspace'),
        active: this.attr(true),
        queries: this.hasMany(Query, 'workspaceId')
    }
  }
}

I create an app with two workspace objects:

myVue.$store.dispatch('entities/apps/create',{
        data: {
            'workspaces': [
                {
                    id: 111,
                    name: 'Workspace 1',
                    active: true,
                    queries: [
                        ... array of JSON query objects ...
                    ]
                },
                {
                    id: 222,
                    name: 'Workspace 2',
                    active: false,
                    queries: [
                        ... array of JSON query objects ...
                    ]
                }
            ]
        }
    })

Once this is complete, I use the getters to get the instance of the only App object state:
myVue.$store.getters['entities/apps/all']()[0]

When looking at the workspaces property (Array), it has no items (usually IDs).

But, if I look directly at the state, I see related child object IDs:
myVue.$store.state.entities.apps.data._no_key_0.workspaces
I see an array of my two workspace IDs.

So, why can't I see these child IDs by using the getter call?

Thanks in advance!

Hi again,
Quickly, is there a way to define some computed/getter directly in model. Is it recommended to use es6 getters in Model class (I guess it will some have reactivity issue) ?

Use case :

class User extends Model {
  static entity = 'users'

  static fields () {
    return {
      id: this.attr(null),
      firstname: this.attr(''),
      lastname: this.attr(''),
      computedName: this.computed(() => {
         return this.firstname +  ' ' + this.lastname
       })
    }
  }
}

Is it possible to define a field on a Model that may contain more than one type of Model, or an array containing different types of Models.

Something like normalizr's schema mapping function, giving control over how entities are contructed/deconstructed:
https://github.com/paularmstrong/normalizr/blob/master/docs/api.md#schema
"If your input data is an array of more than one type of entity, it is necessary to define a schema mapping."

Thanks.

I'm trying to get all data that's related to a model and then also all the relationship data as well. When outputting this: this.$store.getters['entities/evaluations/query']().get() my relationship attribute returns undefined.

If I run: this.$store.getters['entities/evaluations/query']().with( 'assessors' ).get() It returns an empty array for the attribute's value.

However if I run: this.$store.getters['entities/evaluations/query']().find() It returns the first record with the relationship value just fine so I know I set it up correctly.

I've been trying to debug the issue for a couple hours now and I can't seem to find the issue.

make a demo

Today I stumbled upon a common use case which currently isn't covered by vuex-orm.

Idea

Add an action insertOrUpdate (couldn't think of a better name) which will insert new records into the collection or update records already existing.

// Initial State
{
    entities: {
        users: {
            data: {
                '1': { id: 1, name: 'John', roles: [3] }
            }
        }
    }
}

// `insertOrUpdate` is going to add new records and update existing data (see `update`).
store.dispatch('entities/users/insertOrUpdate', {
    data: [
        { id: 1, name: 'Peter' },
        { id: 2, name: 'Hank' },
    ]
})
  
// State after `insertOrUpdate`.
{
    entities: {
        users: {
            data: {
                '1': { id: 1, name: 'Peter', roles: [3] },
                '2': { id: 2, name: 'Hank' }
            }
        }
    }
}

Use case

In my case relationships aren't always returned by the API. You can specify which relationships should be embedded in the response to reduce data transfer and queries on the database.

E.g. when loading the current user, I will fetch his roles, but for listing all users this isn't needed, so I can fetch them when loading the detail view. But currently when loading all users without roles, all existing users will be overwritten with the provided data.

Current workaround

My current workaround is looking like the following and I think it would be helpful for many users to include a similar solution in vuex-orm.

const users; // Retrieved from some API
const promises = users.map(user => {
    if (this.$store.getters['entities/users/find'](user.id) !== null) {
        return this.$store.dispatch('entities/users/update', {
            where: user.id,
            data: user
        });
    }
    return this.$store.dispatch('entities/users/insert', {
        data: user
    });
});

Promise.all(promises).then(() => {
    // All users have been inserted or update, now we can do anything we want
});

Final words

What are you thinking about this idea? Is it a good approach to extend vuex-orm or should I just use a self-written helper? If you like this idea, I could try to create a PR implementing this feature.

Many ORMs provide model methods like .find(), .create() or .save(). With Vuex-ORM we have to use rather long lines like this.$store.dispatch('entities/users/create', { data: { ... } }) or this.$store.getters['entities/users/query']().find().

What do you think about convenience methods like .find(), .first(), .create() and so on on the model class, that dispatch those events against vuex?

I think that would be a more comfortable way to work with vuex-orm :)

Hello again @kiaking

I have a question regarding .get() method. In an example like below:

records() {
  return this.$store.getters['entities/timesheets/query']()
          .where(record => record.status === 'submitted' || record.status === 'resubmitted')
          .get();
}

If no records are found we receive null. So to pass it to v-for or pass it to component as a required prop I have to first check if it is not null. Wouldn't it be more intuitive if .get() returned empty array [] if no records were found? I am coming from Rails world and that's what I am used to ;) Let me know what you think?

Sorry for the cryptic title.

I have a few models.
In total they have 18 different entities as of now.
One model "myEntity" only has 2 entities right now.

If I call getter['entities/myEntity/query']().get() I get a return of 18 entities, all forced into the format of myEntity, and therefore they have ID:s and other fields that overlap, but the other fields are null.

Is it me doing something wrong or has anyone else seen this?

Hi again,
https://codesandbox.io/s/1wvjq1jxw3

When defining inverse hasOne relationship. update fails to update relationship/ insert succeed.
Is that expected behaviour ?

Hi,

The hasMany relies on id instead of the configurable primaryKey. Should be using the custom value :)

https://github.com/vuex-orm/vuex-orm/blob/master/src/repo/Repo.ts#L655

(I'll try to fix it.. dunno if hard).

Would you be able to make a quick way of getting the last item? Like first() but create one called last(). Or if possible, when creating/inserting new data, it could return the last id that was created? Or return the whole object?

Hi @kiaking

I have a following query:

const lastTimeLog = this.$store.getters['entities/timeLogs/query']()
          .orderBy('stopped_at', 'desc')
          .first();

first() returns always first entity without respecting order. From the code above I expect to get time log with biggest value for stopped_at. Instead, I always get first entity. Am I missing something?

We should have this as a basic feature, and also to implement #38 .

// Vuex State
{
  posts: {
    data: {
      '1': { id: 1, title: '...', likes: 5 },
      '2': { id: 2, title: '...', likes: 8 },
      '3': { id: 3, title: '...', likes: 6 }
    }
  }
}

store.getters['entities/posts/query']().max('likes')

// 8

Hi,

I'd like to know how to load multiple nested relation.

_getters['entities/project/query']()
    .with('activity.period')
    .with('activity.activityType') // <--
    .all(),

What's the syntax ?

Thanks !!

Example:

There are two models: Model1 and Model2.
Model1 has an attribute with a hasMany or hasManyBy relation to Model2.

When querying a Model1 with no related Model2s, the attribute is null.
I think it should be an empty array instead to match the find() behavior, which returns an empty array when there are no results.

Hi. Is it have sense to merge functionality from this repo https://github.com/aarondfrancis/vue-model ?

I think it would be nice to extend the functionality of the orm, or should it be done in the form of a plug-in thanks to the 0.18 version?

Or, if it develop as a plug-in, it will turn into dependency hell

Hi again,

I am using hasMany relationship on my model like so:

export default class App extends Model {
  static entity = 'apps';

  static fields() {
    return {
      id: this.attr(null),
      name: this.attr(''),
      machine_name: this.attr(''),
      version: this.attr(''),
      status: this.attr(''),
      roles: this.hasMany(Role, 'app_id'),
    };
  }
}

When I Insert apps it all works as expected. I see my apps and roles in the store and each app has array of role ids under roles attribute.

The problem is when I try to query all apps.
I use this.$store.getters['entities/apps/all']() to get all my apps. All is good but each app has roles parameter set to null instead of array of ids. Am I missing something?

Hello,

For my use-case, I want to be able to subscribe to any changes that happens to a model (created/deleted/updated instances). It works fine with store.subscribe vuex API, but vuex-orm does not fire relationship mutations when inserted from their parent relationships for instance (which is not an issue by the way).

class User extends Model {
  static fields () {
    return {
      id: this.attr(null),
      bookCurrentlyReading: this.belongsTo(Book, 'currentBookId')
    }
  }
}

class Book extends Model {
  static fields () {
    return {
      id: this.attr(null),
    }
  }
}

You see, if I insert this data

dispatch('entities/user/insert', {
  id: 1, 
  bookCurrentlyReading: {
    id: 12, 
    title: 'a Book'
  }
})

I want to be able to subscribe to inserting/updating actions that happen to book model only.
No mutation is fired for book model (eg: 'entities/insert' with entity === 'book' )
So now, I'm forced to subscribe to user model to retrieve data when a book change.

store.subscribe(({ type, payload }, state) => {
  if (type === 'entities/insert' || type === 'entities/update') {
    const { entity } = payload
    if (entity === 'book') {
       //dont gets it
    } else if (entity === 'user') {
       //gets it
    }
  }
})

Would it be valuable to have an API for this. Is there any workaround you can suggest ?
Thanks

Happy new year! 🎉

Unfortunately, when I try to get entities like this:

getters['entities/user/query']()
          .where('roleId', 3)
          .where('firstname', (value) => value.includes(searchTerm))
          .orWhere('surname', (value) => value.includes(searchTerm))
          .orWhere('username', (value) => value.includes(searchTerm))
          .orWhere('email', (value) => value.includes(searchTerm))
          .get()

where('roleId', 3) is being ignored.

Is data persistence possible with a backend (REST or other) ?

Thanks for such a great plugin!

We just managed to integrate vuex-orm in our project, but had to determine that it adds ~1mb in vendor-files by adding complete lodash.js and moment.js.
Is this really necessary?

I have a variable containing a record. This records id field is null because it was newly created and the client can't know the id which will the server assign.

Now I want to update or delete this record. Who can I achieve that?

Dear @kiaking

I currently have an actual Todo list application that I've been building for over a year now. A very long time ago I had a problem after integrating Vuex that it was difficult to have getters or computed properties saved on a per item basis who's return values are all cached.

Therefore I made my own solution by building one Vue instance per item.

I am currently wondering if Vuex-ORM would be a good replacement or not, and especially in terms of keeping the computed properties per item cached.

This is my solution:

// imports
import ItemComputedProperties from './ItemComputedProperties.js'

window.cachedItems = {};
export default function(id) {
  if (cachedItems[id]) { return cachedItems[id] }
  if (!store.state.nodes[id])
  {
    console.log(`couldn't create new Vue for item ${id} because the node doesn't exist!`);
    return false
  }
  console.log(`creating new Vue for item ${id}!`)
  return cachedItems[id] = new Vue({
    store,
    data: {
      item: store.state.nodes[id],
    },
    computed: ItemComputedProperties,
  });
}

At the bottom you can see the imported ItemComputedProperties. This is basically a list of about 30 computed properties per item. It contains things like: isDue(), hasParentDue(), visibleChildrenIds(), nextItemId(), isProject(), etc.

I would make a call like so: itemGetters(48).isDue() which would let me know if item with id 48 is due or not, and this would be used inside Vue components to show/hide things and classes.

Now I wonder, if I install vuex-orm, which would be more memory intensive. My current solution works fine. I'm wondering the benefits of vuex-orm. Please enlighten me!

Either the documentation is wrong, or we can't find the correct way to create and mutate the store (https://revolver-app.gitbooks.io/vuex-orm/store/creating-and-updating.html).

TL;DR: Use dispatch instead of commit.

We tried to work with your commit approach, but always got the message: [vuex] unknown mutation type: entities/user/create

actions.js:

export const setUserInfo = ({ commit }, val) => {
  commit('entities/user/create', { data: val })
}

component.vue:

<script>
  import { mapActions } from 'vuex'

  export default {
    methods: {
      ...mapActions(['setUserInfo']),
      async makeLogin () {
          const userData = { foo: 'bar' }

          this.setUserInfo(userData)
      }
    }
  }
</script>

models/user.js:

// User Model
import Model from 'vuex-orm/lib/Model'

export default class User extends Model {
  // This is the name used as module name of the Vuex Store.
  static entity = 'user'

//  static primaryKey = 'id'

  // List of all fields (schema) of the post model. `this.attr` is used
  // for the generic field type. The argument is the default value.
  static fields () {
    return {
      id: this.attr(null),
      gender: this.attr(''),
      username: this.attr(''),
      mailadress: this.attr(''),
      notification: this.attr(false),
      position: this.attr(''),
      avatar: this.attr(''),
      token: this.attr(null)
    }
  }
}

When we use dispatch in our actions.js, everything works just fine.

Hello,

Is it possible to have nested structure like below?

export default class App extends Model {
  static entity = 'apps';

  static fields() {
    return {
      id: this.attr(null),
      ...
      settings: {
        billing_categories: this.hasMany(Category, 'app_id'),
        ...
      },
    };
  }
}

It seems that for such a case normalization does not work.
As a side not, I was able to make it work with normlizr.
Is there any way to make it work?

Thanks!

I've implemented a hacky solution to implement fuse.js (fuzzy object search library) to filter api data based on user input before calling your create method.

It would be convenient to extend the Query class to provide my own fuse.js interface for regex matching.

I understand I can use the source code to extend your classes, but I think it would a great feature to allow add-ons in the install constructor.

Obviously we don't want to bloat core library with unnecessary packages, so allowing optional add-ons would be the solution.

I'd be happy to maintain the first add-on for fuzzy search but I would defer to your implementation of how to handle add-on interfaces.

Raised from #11.

When inserting an object with an ID that already exists in the store, the updated entity isn't returned. I think this would be a nice addition.

const form = await this.$store.dispatch('entities/forms/insert', {data: response.data});
console.log(form);

I wanted to publish the orm-vuex-apollo plugin with the name @vuex-orm/plugin-apollo, because the search plugin uses a similar name and well it made sense for me.

I got Error: Forbidden : @vuex-orm/plugin-apollo, which actually makes sense, due to the fact that this namespace doesn't belong to me.

Should I simply rename my plugin or does it make sense to have all plugins under the same namespace?

Have an option which will have the ORM automatically increment the id of new records if the id is not supplied.

Hi @kiaking

This is not an issue but something I wanted to share with you.
I was wondering why do we have those two normal selectors:
const users = store.getters['entities/users/all']() and
const users = store.getters['entities/users/find'](1) aside from query builder.

For me for instance, it would be much easier to have syntax like below for those two:
const users = store.getters['entities/users/query']().all() and
const users = store.getters['entities/users/query']().find(1).

This way everything inside parents stays always the same for all selectors and only the last part changes based on the type of the operation you want to perform.
What are your thoughts on this one? Does it make sense?