Change filter value before query

[dj-fiorex]

Hello to all, i have a simple question about how filter work.
Right now i use Supabase DataProvider, i have two table Operator and Operation. One operation has one operator.
This is the field operator in the operation list component:

{
    field: "operatorId",
    headerName: "Operator",
    type: "number",
    minWidth: 250,
    flex: 1,
    renderCell: function render({ row }) {
     if (operatorsIsLoading) {
      return "Loading...";
     }

     const operator = operatorsData?.data.find(
      (item) => item.id === row.operatorId
     );
     return operator?.name;
    },
},

Of course the DataGrid filter allow me to input an integer on the filter, how can i change this behaviour? I would like to show the operator name on the filter and then query the backend with the operator id.

Thanks to all

[omeraplak]

Hey @dj-fiorex ,
Sorry, I'm not sure I understood correctly, would it be helpful to add relational data to the table?

https://refine.dev/docs/advanced-tutorials/data-provider/supabase/#select---handling-one-to-many-relationship

[dj-fiorex]

Oh yes, i will try to explain better
This is my two table:
OPERATOR

id	name	surname

OPERATIONS

id	name	operatorId

This is the list component of the resource OPERATION

export const OperationList: React.FC = () => {
    const { dataGridProps } = useDataGrid<IOperation>();
   
    const operatorIds = dataGridProps.rows.map((item) => item.operatorId);
    const { data: operatorsData, isLoading: operatorsIsLoading } =
     useMany<IOperator>({
      resource: "operators",
      ids: operatorIds,
      queryOptions: {
       enabled: operatorIds.length > 0,
      },
     });
   
   
    const columns = React.useMemo<GridColumns<IOperation>>(
     () => [
      { field: "id", headerName: "ID", flex: 1, minWidth: 50 },
      { field: "name", headerName: "Name", flex: 1, minWidth: 350 },
   
      {
       field: "operatorId",
       headerName: "Operator",
       type: "number",
       minWidth: 250,
       flex: 1,
       renderCell: function render({ row }) {
        if (operatorsIsLoading) {
         return "Loading...";
        }
   
        const operator = operatorsData?.data.find(
         (item) => item.id === row.operatorId
        );
        return operator?.name;
       },
      },
    
      {
       headerName: "Actions",
       field: "actions",
       minWidth: 250,
       renderCell: function render(params) {
        return (
         <Stack direction="row" spacing={1}>
          <EditButton hideText recordItemId={params.row.id} />
          <ShowButton hideText recordItemId={params.row.id} />
          <DeleteButton hideText recordItemId={params.row.id} />
         </Stack>
        );
       },
      },
     ],
     [
      operatorsIsLoading,
      operatorsData?.data,
     ]
    );
   
    return (
     <List
      cardHeaderProps={{
       title: "Operations",
       action: (
        <Stack direction="row" spacing={1}>
         <CreateButton />
         <ExportButton onClick={triggerExport} loading={exportLoading} />
        </Stack>
       ),
      }}
     >
      <DataGrid
       {...dataGridProps}
       columns={columns}
       autoHeight
       checkboxSelection
       disableSelectionOnClick
      />
     </List>
    );
   };
   

With this configuration the filter of the column operatorId will be of type NUMBER so i can select <, >, != ecc. This works ok because the query to the backend use the id.
What i want to do is to be able to filter the column operatorId by operator.name but i want to send operator.id to the backend

Thanks!

[salihozdemir]

Hey @dj-fiorex, When you select a operator, your table data will update according to operatorId. Your useMany hook only fetch based on operators in table data.

So, you should change the your useMany hook to useList like below:

const { data: operatorsData, isLoading: operatorsIsLoading } =
 useList<IOperator>({
  resource: "operators",
  config: {
      hasPagination: false,
    },
 });

[dj-fiorex]

Perfect, with the useList hook the filter is ok.
Remain another problem though, when i click on the cross icon to close the filter a call with an empty string is made to my backend.

Guys i have a lot of question about how to do things in refine, but i do not know where the best place for such questions is.

[omeraplak]

You can join our Discord server

[salihozdemir]

Perfect, with the useList hook the filter is ok. Remain another problem though, when i click on the cross icon to close the filter a call with an empty string is made to my backend.

Guys i have a lot of question about how to do things in refine, but i do not know where the best place for such questions is.

Hey @dj-fiorex,

I reproduced what you want to do and got a similar result. It must be a bug. Can you open an issue for this?
By the way, I noticed that it updates the filterModel and add filter with an empty string. So you see the empty select option. Until the issue is resolved, you can override onFilterModelChange like below:

onFilterModelChange: (
   model: GridFilterModel,
   details: GridCallbackDetails<"filter">
  ) => {
   const filteredModel =  model.items.filter(item => item.value);
   dataGridProps.onFilterModelChange(filteredModel, details);
  },

To better understand what's going on, you can watch the dataGridProps with console.log.

[dj-fiorex]

Thanks a lot @salihozdemir
issue opened #2992

By the way the solution that you suggested is not working because typescript give me an error "Argument of type 'GridFilterItem' is not assignable to parameter of type 'GridFilterModel'." i think because
const filteredModel = model.items.filter(item => item.value)
filteredModel is of type GridFilterItem and not GridFilterModel

EDIT:
maybe something like this works?

onFilterModelChange: (
   model: GridFilterModel,
   details: GridCallbackDetails<"filter">
  ) => {
   const filteredModel = {
    ...model,
    items: model.items.filter((item) => item.value),
   };
   dataGridProps.onFilterModelChange(filteredModel, details);
  },