如何在React Admin中用ilike替代eq过滤查询Supabase数据库？

问题分析 #

当前你的React Admin应用使用TextInput（或SearchInput）作为帖子标题过滤器时，默认采用严格匹配（eq操作符），导致只有输入完整的"second post"才能匹配到对应帖子，输入"second"则无结果。数据库日志显示请求为/post?title=eq.second，确实需要将匹配规则改为ilike（Postgres的不区分大小写模糊匹配）才能实现部分关键词搜索。

解决方案 #

要实现模糊搜索，需要给过滤输入组件指定ilike操作符，并为输入值添加通配符%（Postgres中%代表任意长度的字符）。具体步骤如下：

1. 修改过滤组件配置

给TextInput添加operator="ilike"属性，同时通过parse函数将用户输入的关键词包裹在%中，这样Supabase就能识别为模糊匹配查询：

const postFilters = [
    <TextInput 
        source="title" 
        label="Search by title" 
        alwaysOn 
        operator="ilike"
        parse={(value) => `%${value}%`}
    />,
];

export const PostList = () => (
    <List filters={postFilters}>
      <Datagrid>
        <TextField source="id" />
        <TextField source="title" />
        <EditButton />
        <ShowButton />
      </Datagrid>
    </List>
);

2. 原理说明

• operator="ilike"：告诉React Admin使用模糊匹配操作符替代默认的严格匹配eq
• parse={(value) => %${value}%}：将用户输入的"second"转换为"%second%"，Postgres的ilike会匹配所有包含该关键词的标题

配置完成后，当输入"second"时，请求会变为/post?title=ilike.%second%，Supabase会返回所有标题包含"second"的帖子，包括目标的"second post"。

备选方案：自定义数据提供者（如果官方提供者不支持自动处理） #

如果使用的ra-supabase数据提供者未正确处理ilike操作符，可以自定义getList方法中的过滤逻辑，强制对title字段使用模糊匹配：

// 自定义Supabase数据提供者的getList片段
const getList = async (resource, params) => {
  const { page, perPage } = params.pagination;
  const { field, order } = params.sort;
  const query = supabase
    .from(resource)
    .select("*", { count: "exact" })
    .order(field, { ascending: order === "ASC" })
    .range((page - 1) * perPage, page * perPage - 1);

  // 处理过滤条件
  Object.entries(params.filter).forEach(([key, value]) => {
    if (key === "title") {
      // 对title字段使用ilike模糊匹配
      query.ilike(key, `%${value}%`);
    } else {
      // 其他字段保留默认严格匹配
      query.eq(key, value);
    }
  });

  const { data, error, count } = await query;
  if (error) throw new Error(error.message);

  return { data, total: count };
};

内容的提问来源于stack exchange，提问作者Nicolas Chusseau