So Hi i am trying to render columns and rows in material table which are loaded from redux.
Let my try to explain
const data = useKPIReport(_ => _.data) // from redux
<TableContainer>
<MaterialTable
tableRef={tableRef}
columns={options.columns}
options={}
data={
async (query) => {
const {
page,
pageSize
} = query
try {
const fetchReport = async () => {
try {
const result = await postReport({
startDate: startDateEpoch / 1000,
endDate: endDateEpoch / 1000,
page: page + 1,
pageSize,
accountId
})
const { rows, totalRowsCount } = data // this is important data from redux
return {
columns: formattedCols,
totalCount: totalRowsCount,
rows
}
} catch (e) {
console.error(e)
return handleError()
}
}
const result = await fetchReport()
return ({
data: result.rows,
page,
totalCount: result.totalCount,
})
} catch (e) {
console.error(e)
dispatch(snackbarMessagesAction({
severity: 'error',
messages: [t('Failed to fetch report')]
}))
return ({
data: [],
page: 0,
totalCount: 0
})
}
}}
So overall postReport() method it doesn’t return any results, it sends data to redux, and look like redux is updated later so it’s not possible return results in time.
Any idea how to tackle this in data prop, i have tried something with useEffect:
React.useEffect(() => {
tableRef.current && tableRef.current.onQueryChange()
}, [data])
but feeling this is not possible, i need some general idea usually API endpoint (“postReport()”) returns results but that is not option for me since i am storing results into redis, and later redux is updated via server side event.
