Table is not refreshed with remote data

[b3ni]

Description

When the data attribute is a function and this callback is changed, the data is not refreshed again.

Demo

https://codesandbox.io/s/material-table-starter-template-forked-cxqmwq?file=/src/index.js

Expected behavior

Make a remote call again

Additional context

I think the problem is in the componentDidUpdate method there is no else section

if (!this.isRemoteData()) {
     propsChanged = propsChanged || !deepEql(prevProps.data, this.props.data);
}

[KippWade]

You can set up a ref for the table, such as tableRef = useRef()

in the table props, you set the ref
tableRef={tableRef}

In other locations in your component, you can trigger a refresh by using the ref

tableRef.current.onQueryChange();

Our remote data is set up like:

data={query =>
new Promise<QueryResult>((resolve, reject) => {
// query holds usefull table info, error, filters, orderByCollection, page, pageSize, search, totalCount

	const fetchList = async () => {
		// perform query
			if (response !== undefined) {
				resolve({
					data: response.results,
					page: response.page,
					totalCount: response.totalCount
				});
			} else {
				reject();
			}
		));
	};
	fetchList();
})

}

[b3ni]

In other parts of the application I use onQueryChange without any problem.

The problem comes when the asynchronous function is changed.

For example, I have also tried:

const { id } = useParams();  // react-router-dom
const url = `/api/v1/endpoint/${id}`;

const fetchRemote = useCallback(async (query) => {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data; // data, page, totalCount
    } catch (error) {
        ...
    }
}, [id]);

...
data={fetchRemote}

Another test has been using effect. But the problem is that I have 2 calls to the api when the page is rendered for the first time.

const { id } = useParams();
const ref = useRef(null);

useEffect(() => {
    ref.current?.onQueryChange();    
}, [id]);

...
ref={ref}
data={createFetchRemote(`/api/v1/endpoint/${id}`)}

[Domino987]

Yrs i think the callback is only called if something is the query changes, not if the callback changes. This is dine because people to not memorize their functions and this would result in infinity loops.

[KippWade]

If I remember correctly, from an experiment I did some time ago, In the parens for onQueryChange(here), I THINK you can put in the updated data class.
{
data: updatedArray
page: #,
totalCount: #
}