fix: Load relationships on search page load (#6295)

app/models/base/Model.ts

@@ -3,6 +3,7 @@ import { set, observable, action } from "mobx";
 import type Store from "~/stores/base/Store";
 import Logger from "~/utils/Logger";
 import { getFieldsForModel } from "../decorators/Field";
+import { getRelationsForModelClass } from "../decorators/Relation";
 
 export default abstract class Model {
   static modelName: string;
@@ -16,6 +17,7 @@ export default abstract class Model {
   @observable
   isNew: boolean;
 
+  @observable
   createdAt: string;
 
   @observable
@@ -29,6 +31,36 @@ export default abstract class Model {
     this.isNew = !this.id;
   }
 
+  /**
+   * Ensures all the defined relations for the model are in memory
+   *
+   * @returns A promise that resolves when loading is complete.
+   */
+  async loadRelations() {
+    const relations = getRelationsForModelClass(
+      this.constructor as typeof Model
+    );
+    if (!relations) {
+      return;
+    }
+
+    for (const properties of relations.values()) {
+      const store = this.store.rootStore.getStoreForModelName(
+        properties.relationClassResolver().modelName
+      );
+      if ("fetch" in store) {
+        await store.fetch(this[properties.idKey]);
+      }
+    }
+  }
+
+  /**
+   * Persists the model to the server API
+   *
+   * @param params Specific fields to save, if not provided the model will be serialized
+   * @param options Options to pass to the store
+   * @returns A promise that resolves with the updated model
+   */
   save = async (
     params?: Record<string, any>,
     options?: Record<string, string | boolean | number | undefined>
@@ -93,7 +125,7 @@ export default abstract class Model {
    * Returns a plain object representation of fields on the model for
    * persistence to the server API
    *
-   * @returns {Record<string, any>}
+   * @returns A plain object representation of the model
    */
   toAPI = (): Record<string, any> => {
     const fields = getFieldsForModel(this);
@@ -104,7 +136,7 @@ export default abstract class Model {
    * Returns a plain object representation of all the properties on the model
    * overrides the native toJSON method to avoid attempting to serialize store
    *
-   * @returns {Record<string, any>}
+   * @returns A plain object representation of the model
    */
   toJSON() {
     const output: Partial<typeof this> = {};

app/models/decorators/Relation.ts

@@ -49,6 +49,9 @@ export const getInverseRelationsForModelClass = (targetClass: typeof Model) => {
   return inverseRelations;
 };
 
+export const getRelationsForModelClass = (targetClass: typeof Model) =>
+  relations.get(targetClass.modelName);
+
 /**
  * A decorator that records this key as a relation field on the model.
  * Properties decorated with @Relation will merge and read their data from