react-admin filter with i18n fields - filter

Question

I have followed the docs of marmelab to add i18n to my react-admin, so far so good. One of my ressources has only a field that is translated in 3 languages (en.js fr.js etc.)
name: {
en: 'name',
fr: 'name (French)',
cn: 'name (Chinese)',
},
this is the components I have tried to add a filter to
import { Datagrid, List, TextInput, TextField } from 'react-admin';
function ManufacturerList() {
const manufacturerFilter = [
<TextInput
source='name.en'
alwaysOn
resettable
/>,
];
return (
<List
sort={{ field: 'name', order: 'ASC' }}
filters={manufacturerFilter}
>
<Datagrid
rowClick='show'
bulkActionButtons={false}
>
<TextField source={`name.en`} />
<TextField source={`name.fr`} />
<TextField source={`name.cn`} />
</Datagrid>
</List>
);
}
export default ManufacturerList;
so I have 3 problems:
the filter with name.en gives me an error "something went wrong", the url return after typing "Example" in the textinput filter is
http://localhost:3001/#/manufacturers?displayedFilters=%7B%7D&filter=%7B%22name%22%3A%7B%22en%22%3A%22example%22%7D%7D&order=ASC&page=1&perPage=10&sort=name
once i figure how to use the name.en, can i replace .en by .${locale} that would match the language chose by the user?
my search filter before i18n where source='name.like' to have partial match, is it possible to combine this with the i18n ?
and here is the query that is shown in react query devtool
["manufacturers","getList",{"filter":{"name":{"en":"example"}},"pagination":{"page":1,"perPage":10},"sort":{"field":"name","order":"ASC"}}]
--> if i edit the url and i get to this query below, then the filtering works
["manufacturers","getList",{"filter":{"name.en":"example"},"pagination":{"page":1,"perPage":10},"sort":{"field":"name","order":"ASC"}}]

Answer 1

React-admin sees compound names as paths, so it's normal that a filter on names.en translates to the following filter value in dataProvider.getList(): {"name":{"en":"example"}}.
If that's not what your API expects, then you must do the translation in your dataProvider, by flattening the filter value, e.g. using the flat npm module.
Something like:
const dataProvider = {
...baseDataProvider,
getList: async (resource, params) => {
let newParams = params;
if (resource === "manufacturers") {
newParams.filter = flat(params.filter);
}
return baseDataProvider.getList(resource, newParams);
},
};