fetchRecords does not refresh hasMany relationships in Smart View

Help me!
1

There are two collections, users and orders. A user hasMany orders.
We’re building a Smart View for the user collection and will show all the orders and their detail under each user like this:

* User 1
1. Order a
2. Order b

* User 2
1. Order c
2. Order d

We add a button Refresh that calls fetchRecords to refresh the current page.
But after changing the detail of the order, the orders shown on the Smart View seem not being fetched and we have to manually press F5 to refresh the entire view.

Is this a bug or do I need an additional parameter for fetchRecords to correctly fetch relationships data?

2

Hi @JimmyHu,

Welcome to the Forest community forum.

Can you please share your project name and your smart view code?

Another point (maybe not relevant for your case) did you noticed you can list easily a user’s orders on the details tab of a user?

Regards

3

Hi Silman,

My project name is Brewing and here’s the code snippet

import React from 'react';
import WithEmberSupport from 'ember-react-components';
import { triggerSmartAction } from 'client/utils/smart-view-utils';

@WithEmberSupport
export default class extends React.Component {
  render() {
    const {
      records,
      collection,
      numberOfPages,
      recordsCount,
      currentPage,
      searchValue,
      isLoading,
      fetchRecords
    } = this.props; 
    
    const handleRefresh = () => {
      fetchRecords();
    }
    
    return (
      <div className="root">
          {records && records.map(record => (
          <div>
          <h2>{record['forest-fullname']}</h2>
          {record['forest-userOrders'] && record['forest-userOrders'].map(item => (
            <div className="order-item">
              <p>[{item['forest-status']}] {item['forest-title']}</p>
            </div>
          ))}
          </div>
          ))}
        <div className="footer">
          <a href="#" onClick={handleRefresh}>Refresh</a>
        </div>
      </div>
    );
  }
}

We’re building custom view for the orders with the smart view feature

4

Hi @JimmyHu,

The first call to fetchRecords fetches records and the relationships.
Another call to fetchRecords will fetch again the records, but not the relationships.
That is why a refresh button will not bring relationship changes.

I am thinking this is a bug so I am creating a ticket to solve this.
The issue tracking is visible here: ClickUp

Regards

5

Hi @JimmyHu :wave: I have some news for you.
After many investigations, this behavior is the normal one, for performance purpose.
BUT I have push a little fix who can let you do a trick for that.
After refreshing your browser you can do something like below

const handleRefresh = async () => {
    await fetchRecords();
    const { records } = this.props;
    records.forEach(record => record.hasMany('forest-userOrders').reload());
}

Let me know.