# Related data not displaying correctly with smart field as reference field

**URL:** <https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604>\
**Category:** Help me!\
**Created:** [June 3, 2021, 9:26am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604 "2021-06-03T09:26:58Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [June 3, 2021, 9:26am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/1 "2021-06-03T09:26:58Z")

</div>

Hi, it is me again 👋,

The reference field of a related data is not loading properly when the related model has not been “opened”/loaded.

I have a model with multiple related data model:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/a/a194ad3534e51e84141e6f14078717d6f5e7d25f.png)

When I click on Materials, I want to see this screen:

 ![Untitled](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/d/d71f95ecc0d64d21257ee79bce4c3fe267a88db8.jpeg)  
Behind black square is the name of the Material Per Origin, which is a smart field used as the reference field of the model.

But sadly the data is not displayed correctly when I just load a fresh page:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/3/3fa04edd80c6757a06481cf2dfd40d03a600473f.png)

To fix this thing I have to load the model and after that the correct reference field is used.

Is there something I can do to not manually load the related model in order to see the correct reference field ?

## Context

Materials is actually a table named `Material Per Origin` that have 2 joints: one on `Materials` and one on `Origins`.

```
Forest Express: 8.5.1
Express Version: 4.17
Sequelize Version: 7.9.1
Database Dialect: PostgreSQL
Database Version: 13

```

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [June 3, 2021, 10:52am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/2 "2021-06-03T10:52:39Z")

</div>

Hey @LotusBlack,

Sorry for the delayed reponse, I’m trying to reproduce your issue on my end and i’ll ping you when I’ve got news to share.  
I may have misunderstood your setup however, do you have a schema for this part of your database setup (That you can share here or in private if you consider it as sensible informations)? I’m actually not sure to understand the whole relation between the smart field/reference and your database structure.

Thanks for your help

---

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [October 20, 2021, 8:29am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/3 "2021-10-20T08:29:21Z")

</div>

Hi @anon39848301

I can send you a video by pm.  
Let me know if it answer to your questions?

Btw, I still have the issue as of today.

Thanks,

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [October 20, 2021, 8:36am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/4 "2021-10-20T08:36:13Z")

</div>

Do you also have the definition of the smart relationship?

I’m guessing that the response of the route containing the smart relationship does not embed the name by default, maybe related to the version of `forest-express-sequelize` you are using? Could you also share this information here?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [October 20, 2021, 8:38am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/5 "2021-10-20T08:38:16Z")

</div>

Smart relationship definition

```javascript
  PackagingPerMaterial.associate = (models) => {
    PackagingPerMaterial.belongsTo(models.materialPerOrigin, {
      foreignKey: {
        name: 'idMaterialPerOriginKey',
        field: 'id_material_per_origin',
      },
      as: 'idMaterialPerOrigin',
    });
    PackagingPerMaterial.belongsTo(models.packagings, {
      foreignKey: {
        name: 'idPackKey',
        field: 'id_pack',
      },
      as: 'idPack',
    });
  };

```

Forest version

```javascript
    "forest-express": "^8.5.1",
    "forest-express-sequelize": "^7.9.4",

```

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [October 20, 2021, 8:47am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/6 "2021-10-20T08:47:17Z")

</div>

The definition you shared is not a smart relationship, but a “classic” sequelize relation, using a FK.

> Behind black square is the name of the Material Per Origin, which is a smart field used as the reference field of the model.

This was the definition I was asking for. Sorry for being unclear here 😅.

My guess here is that the definition of this smart field does not embed the name (Thus display the id by default), and once the record is fully loaded, then it’ll display the name (Which is the behavior you are having).

---

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [October 20, 2021, 8:54am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/7 "2021-10-20T08:54:40Z")

</div>

Ok my bad.  
Does this answer to your request ?

```javascript
collection('materialPerOrigin', {
  actions: [],
  fields: [{
    field: 'material_and_origin',
    type: 'String',
    get: (materialPerOrigin) => {
      return materialPerOrigin.idMaterial.name + ' ' + (materialPerOrigin.idOrigin ? materialPerOrigin.idOrigin.name : '');
    },
    search: function (query, search) {
      let split = search.split(' ');
      
      query.include.push({
          model: models.materials,
          as: 'idMaterial'
        });
        query.include.push({
          model: models.origins,
          as: 'idOrigin'
        });
    
      query.where[Op.and][0][Op.or].push(
        models.objectMapping.literal(`"idMaterial"."name" ILIKE '%${split[0]}%'`)
      );
    }
  },],
  segments: [],
});

```

I am displaying the name right ? In the `Get` part ?

Thanks for your help @anon39848301 !

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [October 20, 2021, 9:27am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/8 "2021-10-20T09:27:33Z")

</div>

Let me know if I understood everything correctly:

- The collection `materialPerOrigin` has a smart field `material_and_origin`, and it is used as a display reference field.
- The collection `material` has one `materialPerOrigin`.
- You want to display `material_and_origin` as the reference field of `materialPerOrigin` when displaying `material`.

If I’m correct, the behavior you are having is indeed a bug that’ll try to reproduce on my end.

Let me know 🙏

---

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [October 20, 2021, 9:48am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/9 "2021-10-20T09:48:56Z")

</div>

> - The collection `materialPerOrigin` has a smart field `material_and_origin` , and it is used as a display reference field.

That’s right

> - The collection `material` has one `materialPerOrigin` .

No, the collection `material` can have multiple `materielPerOrigin`. `Glass` can be `recycled` or `blank`.

```javascript
  Materials.associate = (models) => {
    Materials.hasMany(models.materialPerOrigin, {
      foreignKey: {
        name: 'idMaterialKey',
        field: 'id_material',
      },
      as: 'idMaterialMaterialPerOrigins',
    });
  };

```

> - You want to display `material_and_origin` as the reference field of `materialPerOrigin` when displaying `material` .

I want to display `material_and_origin` as the reference field of `materielPerOrigin` when I am displaying the data for `materialPerOrigin`.  
When I am looking at the table `Packaging_per_material` I want to see the smart field/reference field `material_and_origin` and not the id.

I am attaching a screenshot of the schema.

 ![schema](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/f/f9eebc5fe60801a45135b7f86fc38c0302e7cce0.png)

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [October 20, 2021, 10:21am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/10 "2021-10-20T10:21:06Z")

</div>

Thanks for the help, I’m able to reproduce the issue on my end as well.

My understanding of the current code for your case is that:

`materialPerOrigin` retrieve and compute the smart field value on the resolved `(materialPerOrigin) => ...` - in the case of the `materialPerOrigin` table, the value includes the related data for both `material` & `origin` and the smart field is correctly compute.

In the `PackagingPerOrigin` table, the `(materialPerOrigin) => ...` **does not** include the related data material & origin. The field is then not computed, thus only display the `id`.

On my end, switching

```javascript
    get: (materialPerOrigin) => {
      return materialPerOrigin.idMaterial.name + ' ' + (materialPerOrigin.idOrigin ? materialPerOrigin.idOrigin.name : '');
    },

```

to

```javascript
    get: async (materialPerOrigin) => {
      const materialPerOriginWithBelongsTo = await materialPerOrigin.findByPk(materialPerOrigin.id, { include: ['material', 'origin'] });
      return materialPerOriginWithBelongsTo.idMaterial.name + ' ' + (materialPerOriginWithBelongsTo.idOrigin ? materialPerOriginWithBelongsTo.idOrigin.name : '');
    },

```

Works as expected. It comes with the drawback of re-fetching the full `materialPerOrigin`, but that’s the best workaround I can propose to far (Until the proper fix is released).

Let me know if that helps 🙏

---

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [October 20, 2021, 11:22am UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/11 "2021-10-20T11:22:39Z")

</div>

Thanks!  
I understand the issue and the workaround you are suggesting.

Sadly, it does not work on my end. I have a failure saying

```javascript
findByPk is not a function

```

Do I have to update something?  
It may be because I am not using forest-express-sequelize V8 ?

```javascript
"forest-express-sequelize": "^7.9.4",

```

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [October 20, 2021, 12:09pm UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/14 "2021-10-20T12:09:01Z")

</div>

Sorry, I rewrote the example for your case and I didn’t notice this.

```javascript
const materialPerOriginModel = require('../models').materialPerOrigin;
const materialPerOriginWithBelongsTo = await materialPerOriginModel.findByPk(materialPerOrigin.id, { include: ['material', 'origin'] });

```

🙂

---

<div class="post-metadata">

**Author:** ![LotusBlack](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/lotusblack/32/881_2.png) [@LotusBlack](https://community.forestadmin.com/u/LotusBlack)\
**Post date:** [October 20, 2021, 12:25pm UTC](https://community.forestadmin.com/t/related-data-not-displaying-correctly-with-smart-field-as-reference-field/2604/15 "2021-10-20T12:25:37Z")

</div>

It is working perflectly!  
Thanks a lot @anon39848301 ! 🙂