How to prevent affecting relations?

[dennation]

Let's say we have two models:

import { Model } from "pinia-orm";
import UserDialogue from "./UserDialogue";

class Chat extends Model {
    static entity = 'chats'

    static fields() {
        return {
            id: this.uid(),
            scrollTop: this.attr(null),

            /**
             * Relations
             */
            userDialogueId: this.attr(null),
            userDialogue: this.belongsTo(UserDialogue, 'userDialogueId')
        }
    }
}

import { Model } from "pinia-orm"

export default class UserDialogue extends Model {
    static entity = 'userDialogues'

    static fields() {
        return {
            id: this.attr(null)
        }
    }
}

Next we have a prop with chatId:

const props = defineProps({
    chatId: String
})

And we can find the chat:

const chat = computed(() => useRepo(ChatRepository).find(props.chatId))

Also, using the same computed, we want to get a related model:

const userDialogue = computed(() => useRepo(UserDialogueRepository).find(chat.value.userDialogueId))

And after all, we pass that related item to some component:

<some-component :user-dialogue="userDialogue"/>

The problem happens when I update the parent model, let's say:

useRepo(ChatRepository).save({
    id: props.chatId,
    scrollTop: 100
})

After that code our component (some-component) will be re-rendered, because changing the parent model affect our child. How to prevent that? Because actually the child is the same, he wasn't changed. I have a lot of related items which force a lot of components to be updated every time I update any parent field. This makes page super slow.

[CodeDredd]

It's really hare to say what the real reason for your slow behaviour is, because computed of course updates whehn something releated to the value changes. Thats normal behaviour. Normally you can adjust how components are updates by using if conditions or functions called async and using suspense. There many ways many reasons.
Please make a repdroduction in codesandbox or stackblitz. Then i can tell you if its pinia-orm related or just a reactivity problem.
The reactivity hell runs often in circles 😆

[dennation]

https://codesandbox.io/s/vibrant-leaf-jqpv30

Add more messages and some custom logic for the message component and you'll got a few seconds latency. Check console output

[CodeDredd]

I found your mistake. In your child component you still load the chat repo, although you dont need it. Since you update the chat repo always it triggers logically all components to rerender which also are using the chat repo.

<template>
  <div>
    Chat
    <message-component
      v-for="message in chat.messages"
      :key="message.id"
      :message="message"
    />
  </div>
</template>

<script>
import { useRepo } from "pinia-orm";
import Chat from "./../models/Chat";
import MessageComponent from "./message-component";

export default {
  props: ["id"],
  components: {
    MessageComponent,
  },
  computed: {
    chat() {
      return useRepo(Chat).with("messages").find(this.id);
    },
  },
};
</script>

instead you just need the repo your component needs!

<template>
  <div>
    Chat {{ id }}
    <message-component
      v-for="message in messages"
      :key="message.id"
      :message="message"
    />
  </div>
</template>

<script>
import { useRepo } from "pinia-orm";
import Message from "./../models/Message";
import MessageComponent from "./message-component";

export default {
  props: ["id"],
  components: {
    MessageComponent,
  },
  computed: {
    messages() {
      return useRepo(Message).where('chatId', this.id).get();
    },
  },
};
</script>