Why vuex-orm returns null in relationship field? - vue.js

Question

I followed the guide of Defining Relationships in Vuex ORM.
I did everything like the guide, so why I get null value in category field in Article Model?
codesandbox
This is how I defining my models (category on article is: hasOne/belongTo):
export class Category extends Model {
static entity = "categories";
static primaryKey = "_id";
static fields() {
return {
_id: this.attr(null),
name: this.attr("")
};
}
}
export class Article extends Model {
static entity = "articles";
static primaryKey = "_id";
static fields() {
return {
_id: this.attr(null),
name: this.attr(""),
category: this.hasOne(Category, "_id")
};
}
}
Config Vuex-orm with vuex in main.js:
import VuexORM from "#vuex-orm/core";
import { Article, Category } from "./models";
Vue.use(Vuex);
const database = new VuexORM.Database();
const Articles = {
namespaced: true,
actions: {
test() {
console.log(this);
}
}
};
const Categories = {
namespaced: true,
actions: {
test() {
console.log(this);
}
}
};
database.register(Article, Articles);
database.register(Category, Categories);
const store = new Vuex.Store({
plugins: [VuexORM.install(database)]
});
Inside app component I have the data that I insert to vuex and get the values like so:
const articleData = [
{
_id: "6ce9bae00000000000000000",
name: "article-1",
category: "5ce9acd00000000000000000"
}
];
const categoryData = [
{ _id: "5ce9acd00000000000000000", name: "category-1" }
];
const x = await Article.insertOrUpdate({ data: articleData });
const y = await Category.insertOrUpdate({ data: categoryData });
const a = Article.query()
.with("category")
.first();
console.log({ a });
console.log({ type: a.category });
console.log("why a.category is null???");

Answer 1

Firstly, the relationship between an article and a category is likely to be a one to many relationship however the issue with your code is the way you are defining the model and inserting data.
In your example you are attempting to provide a foreign key on the relationship target (I am an article and I know the category id I belong to). This kind of relationship is a one-to-one inverse relationship in Vuex-ORM.
In order to get your expected behavior, change your Article model as follows:
export class Article extends Model {
static entity = "articles";
static primaryKey = "_id";
static fields() {
return {
_id: this.attr(null),
name: this.attr(""),
category_id: this.attr(""),
category: this.belongsTo(Category, "category_id")
};
}
}
Note that you are explicitly defining a category_id as a separate field on the Article model rather than pointing to the id field on the Category model. This is the same pattern in all Vuex-ORM relationships. The category field stores the resolved relationship target object, so you destination category object. This is filled in by Vuex-ORM after you query using .with(Category) and should not be included in the data you insert.
Although it wouldn't make much sense, to fix your original example and use a standard one-to-one define your model as follows:
export class Article extends Model {
static entity = "articles";
static primaryKey = "_id";
static fields() {
return {
_id: this.attr(null),
name: this.attr(""),
category: this.hasOne(Category, "article_id")
};
}
}
export class Category extends Model {
static entity = "categories";
static primaryKey = "_id";
static fields() {
return {
_id: this.attr(null),
name: this.attr(""),
article_id: this.attr(null),
};
}
}
And provide an article_id in the data you pass to Article.insertOrUpdate.