How to refresh a List View in admin on rest How to refresh a List View in admin on rest reactjs reactjs

How to refresh a List View in admin on rest


There is no way to refresh a route via react router, and that's a known problem. Admin-on-rest's List component has its own refresh mechanism, but offers no API for it.

My advice would be to use a custom <List> component based on admin-on-rest's one. And if you find a way to expose the refresh action, feel free to open a PR on the aor repository!


@Danila Smirnov's answer above shows this message when I use it now:

Deprecation warning: The preferred way to refresh the List view is to connect your custom button with redux and dispatch the refreshView action.

Clicking the refresh button itself wasn't working either nowadays.

Here's the tweaked version that I got working in mine.

Edit: Modified it a bit more to make it reusable.


RefreshListActions.js

import React, { Component } from 'react'import FlatButton from 'material-ui/FlatButton'import { CardActions } from 'material-ui/Card'import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh'import { connect } from 'react-redux'import { REFRESH_VIEW } from 'admin-on-rest/src/actions/uiActions'import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions'class MyRefresh extends Component {    componentDidMount() {        const { refreshInterval, refreshView } = this.props        if (refreshInterval) {            this.interval = setInterval(() => {                refreshView()            }, refreshInterval)        }    }    componentWillUnmount() {        clearInterval(this.interval)    }    render() {        const { label, refreshView, icon } = this.props;        return (            <FlatButton                primary                label={label}                onClick={refreshView}                icon={icon}            />        );    }}const RefreshButton = connect(null, { refreshView: refreshViewAction })(MyRefresh)const RefreshListActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refreshInterval }) => (    <CardActions>        {filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }        <RefreshButton primary label="Refresh" refreshInterval={refreshInterval} icon={<NavigationRefresh />} />    </CardActions>);export default RefreshListActions

In my list that I want to refresh so often:

import RefreshListActions from './RefreshListActions'export default (props) => (    <List {...props}        actions={<RefreshListActions refreshInterval="10000" />}        >        <Datagrid>            ...        </Datagrid>    </List>)


Definitely hacky, but a work-around could be:

push('/comments/1') //any path to change the current routepush('/comments') //the path to refresh, which is now a new route