Requesting Help with Polymorphic Relationship

[danielkirkland]

Hello! At the outset, I must say that Vuex-ORM is fabulous! Thank you for all of your work on this.
I have a problem, and I would be very appreciative if someone would be able to help me out.
The problem is with creating new data of a One to Many Polymorphic relationship.
I have 3 tables, two of which are listed here (propositions and likes):

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

export default class Proposition extends Model {
  static entity = 'propositions'

  static fields() {
    return {
      id: this.uid(),
      proposition: this.string(''),
      highlighted: this.boolean(false),
      approved: this.boolean(true),
      updated_at: this.attr(),
      user_id: this.attr(),
      user: this.belongsTo(User, 'user_id'),
      likes: this.morphMany(Like, 'likeable_id', 'likeable_type')
    }
  }
}

And

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

export default class Like extends Model {
  static entity = 'likes'
  
  static fields() {
    return {
      likeable_id: this.attr(null),
      likeable_type: this.attr(null),
      likeable: this.morphTo('likeable_id', 'likeable_type'),
      user: this.belongsTo(User, 'user_id'),
      user_id: this.attr()
    }
  }
}

There is a database/index.js:

import { Database } from '@vuex-orm/core'
import User from '@/models/User'
import Proposition from '@/models/Proposition'
import Like from '@/models/Like'

const database = new Database()

database.register(User)
database.register(Proposition)
database.register(Like)

export default database

And I have data coming from the API:

[
  {
    id: 1,
    user_id: 1,
    proposition: 'prop 1',
    user: {
      id: 1,
      first_name: '',
      last_name: '',
      display_name: 'daniel'
    },
    likes: [
      {
        id: 1,
        likeable_id: 1,
        likeable_type: 'propositions',
        user_id: 2,
        user: {
          id: 2,
          display_name: 'elliot'
        }
      }
    ]
  }
]

I have made a change on the backend so that the likeable_type is in agreement with the documentation for Vuex-ORM. However, when the Proposition:create is triggered, the propositions table and users table are populated. However, the likes table, which has a polymorphic one-to-many relationship with proposition does not.
Is there something incorrect in what I have done, or is there a way in which the data could be passed to the polymorphic relation?
Thank you for any guidance that could be offered.
Daniel

[cuebit]

Based on the information you've provided (thanks!) and if I'm understanding your issue correctly, I'm not able to reproduce your issue. See this repro.

Can you provide a reproduction to give visibility of your issue?

[danielkirkland]

Thank you for your help Cuebit. After reading your message, I tried a few other things. I build a form to enter the data into the database, and this solved the problem. Previously, I had hand-keyed in the change of the name of the likeable_type, and somehow this was not recognized by Vuex-ORM.

[cuebit]

@danielkirkland glad you found a solution. Keep winning 👍

[danielkirkland]

Hi Cuebit, would it be possible that you could help me out with a different problem.
I would like to order the 'propositions' by the number of 'likes' that each has. I have tried different things, and I have read though different threads, but I have not found anything that would work. Would you have any ideas on how to go about this. I have these models:

import { Model } from '@vuex-orm/core'
import User from './User'
import Manifesto from './Manifesto'
import Like from './Like'
import ManifestoProposition from './ManifestoProposition'
import Comment from './Comment'
export default class Proposition extends Model {
static entity = 'propositions'
static fields() {
return {
id: this.uid(),
proposition: this.string(''),
highlighted: this.boolean(false),
approved: this.boolean(true),
updated_at: this.attr(),
user_id: this.attr(),
user: this.belongsTo(User, 'user_id'),
comments: this.morphMany(Comment, 'commentable_id', 'commentable_type'),
likes: this.morphMany(Like, 'likeable_id', 'likeable_type'),
manifestos: this.belongsToMany(Manifesto, ManifestoProposition, 'proposition_id', 'manifesto_id'),
};
}
}

import { Model } from '@vuex-orm/core'
import User from './User'
export default class Like extends Model {
static entity = 'likes'
static primaryKey = ['likeable_id', 'likeable_type'];
static fields() {
return {
id: this.uid(),
likeable_id: this.attr(null),
likeable_type: this.attr(null),
likeable: this.morphTo('likeable_id', 'likeable_type'),
user: this.belongsTo(User, 'user_id'),
user_id: this.attr(),
}}
}

If you have any recommendations, I would be very appreciative.

[cuebit]

Ordering is done on retrieval. Since the orderBy method only applies to the model schema (i.e. not nested relations), you'll have to run your own comparator on the size of likes.

For example:

const propositions = Propositions.query().with('likes').get().sort((a, b) => {
  return a.likes.length < b.likes.length ? -1 : a.likes.length > b.likes.length ? 1 : 0
})