React Admin List组件如何使用and/or运算符配置永久过滤器

你在Filter输入组件上配置的parse/format转换逻辑，仅在表单输入交互时生效，属于react-admin表单控件的专属处理逻辑。List组件的静态filter属性不会走这套转换流程，会直接将传入的对象序列化到GraphQL请求的过滤参数中。你之前给输入组件用的{key: 'or', value: [...]}包装结构是react-admin表单内部识别组合逻辑的专用格式，直接传给List的filter属性时无法被ra-postgraphile识别，自然不会被带到请求里。

• 直接传入原生过滤结构
  直接给List的filter属性传PostGraphile可识别的原生过滤对象即可，不需要套输入组件的parse包装层，写法如下：

  <List
    // 永久过滤规则，直接匹配目标GraphQL过滤结构
    filter={{
      or: [
        { cpostals: { contains: "20280" } },
        { cpostals: { contains: "20304" } }
      ]
    }}
    filters={<ListFilters />}
  >
    {/* 列表字段配置 */}
  </List>
  

  注意：不要给静态filter传{key: 'xxx', value: xxx}结构，该结构仅用于Filter表单输入组件的内部逻辑传递，静态filter直接以逻辑运算符（or/and/not等）作为键，对应条件数组/对象作为值即可。

• 动态生成用户关联邮编的过滤规则
  如果邮编是和当前登录用户绑定的动态值，可以结合useGetIdentity或usePermissions拿到用户关联的邮编列表后，动态生成过滤条件：

  const ProductList = () => {
    const { identity, isLoading } = useGetIdentity();
    if (isLoading) return <Loading />;
  
    // 假设identity.postals为当前用户绑定的邮编数组
    const postalFilterConditions = identity?.postals?.map(code => ({
      cpostals: { contains: code }
    })) || [];
  
    return (
      <List
        filter={{ or: postalFilterConditions }}
        filters={<ListFilters />}
      >
        <Datagrid>
          {/* 字段配置 */}
        </Datagrid>
      </List>
    );
  };
  

• 数据库层加权限控制（生产环境必选）
  前端传参实现的过滤可以被用户轻易篡改绕过，若要严格实现邮编维度的商品权限，必须在PostgreSQL层开启行级安全策略（RLS），结合PostGraphile传递的JWT用户信息，在数据库查询层直接过滤无权限的商品行，从根源避免越权访问，前端过滤仅作为交互体验优化。

如果传入正确结构后过滤仍未生效，请检查ra-postgraphile版本，部分早期版本存在顶层组合逻辑运算符（or/and）序列化异常的问题，升级到最新稳定版即可修复。

内容的提问来源于stack exchange，提问作者Pablo Alagon Ubani