Search code examples
react-admin

Are there any ways to disable the persistent behavior of Filter Query Parameter


What you were expecting:

We are using List component and add some filter input. According to the documentation: https://marmelab.com/react-admin/doc/4.0/FilteringTutorial.html

React-admin uses the filter query parameter from the URL to determine the filters to apply to the list. To change the filters, react-admin simply changes this filter query parameter, and the components fetches dataProvider.getList() again with the new filters.

However, we expect some naughty user will change the query param on broswer URL to some invalid value instead of using the filter. For example, we have the query url https://myadmin.dev/#/posts?displayedFilters=%7B%22commentable%22%3Atrue%7D&filter=%7B%22commentable%22%3Atrue%2C%22q%22%3A%22lorem%20%22%7D&order=DESC&page=1&perPage=10&sort=published_at

The query param of order=DESC may be changed by the user to some other values rather than ASC or DESC, this will cause our backend server unable to parse the correct value and return 400

We expect refreshing (f5 / command + R) the page can reset the query, but the query still showing the invalid value. After reading the documentation, it mentions that:

Once a user sets a filter, react-admin persists the filter value in the application state, so that when the user comes back to the list, they should see the filtered list. That’s a design choice.

Are there any way to make the filter value not persistent in the setting?

What happened instead: N/A

Steps to reproduce: N/A

Related code: N/A

Other information:

Environment

React-admin version: 4.2.7

Last version that did not exhibit the issue (if applicable): N/A

React version: 18.2

Browser: Chrome

Stack trace (in case of a JS error):


Solution

  • Yes, there is an option called disableSyncWithLocation in <List> that makes filter state not synced with the URL. This might do the trick for you:

    const MyList = () => (
        <List disableSyncWithLocation>
            ...
        </List>
    );
    

    More details at https://marmelab.com/react-admin/List.html#disablesyncwithlocation