react-admin结合Supabase使用FilterListItem的查询异常问题

这确实是ra-supabase适配器的问题——它对同一字段的多条件过滤会错误地用逗号拼接参数，而Supabase的API要求同一字段的多个条件用&分隔（比如paymentDate=gte.2023-01-01T00:00:00.000Z&paymentDate=lt.2023-12-31T23:59:59.999Z）。逗号拼接会让Supabase把lt.2023-12-31t16:00:00.000z误判为时区字符串，从而抛出「time zone not recognized」的错误。

解决方法：重写数据提供器的getList方法 #

不需要完全自定义组件，只需要修正数据提供器的参数处理逻辑，让它按照Supabase的要求拼接同一字段的多条件：

1. 基于原supabaseDataProvider创建自定义数据提供器
2. 在getList方法中，手动处理过滤条件，将同一字段的多个条件拆分为独立的键值对，用&分隔

代码示例 #

import { supabaseDataProvider } from '@react-admin/supabase';
import { createClient } from '@supabase/supabase-js';

// 初始化Supabase客户端
const supabaseClient = createClient('你的Supabase URL', '你的Supabase密钥');

// 获取原始数据提供器
const baseDataProvider = supabaseDataProvider(supabaseClient);

// 自定义数据提供器，重写getList方法
const customDataProvider = {
  ...baseDataProvider,
  getList: async (resource, params) => {
    const { filter, pagination, sort } = params;
    let query = supabaseClient
      .from(resource)
      .select('*', { count: 'exact' })
      .range(
        pagination.start,
        pagination.start + pagination.perPage - 1
      )
      .order(sort.field, { ascending: sort.order === 'ASC' });

    // 遍历过滤条件，正确添加多条件
    Object.entries(filter).forEach(([field, conditions]) => {
      if (Array.isArray(conditions)) {
        // 同一字段的多个条件，逐个添加
        conditions.forEach(condition => {
          const [operator, value] = condition.split('.');
          query = query[field](operator, value);
        });
      } else {
        // 单个条件
        const [operator, value] = conditions.split('.');
        query = query[field](operator, value);
      }
    });

    const { data, error, count } = await query;

    if (error) {
      throw new Error(error.message);
    }

    return {
      data: data || [],
      total: count || 0,
    };
  },
};

export default customDataProvider;

额外说明 #

• 这个问题属于ra-supabase适配器的参数拼接逻辑bug，你可以去它的GitHub仓库提交issue反馈，后续版本可能会修复
• 用上述方式重写getList后，既保留了react-admin的FilterSidebar交互，又能正确适配Supabase的API规则，不需要完全自定义请求组件

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