React-Admin调用自定义端点时被自动追加多余查询参数问题

问题根源 #

1. 你当前使用的crudProvider默认适配标准NestJS CRUD接口规范，会自动为列表请求拼接分页、排序、筛选类查询参数，这是框架默认行为。
2. 错误将路径后缀、查询参数直接写在Resource的name属性中：name仅作为资源的唯一标识，不参与接口路径拼接，你写的?storeId=1会导致框架识别为URL已存在查询参数，后续拼接新参数时直接用&而非?，进一步导致路径错误。

解决方案 #

优先选择自定义封装DataProvider的方案，可灵活适配各类自定义端点，无需修改原有业务组件逻辑：

步骤1：改造DataProvider，覆盖对应资源的列表请求逻辑 #

const baseDataProvider = crudProvider("http://localhost:3000", fetchJson);

// 扩展基础provider，自定义特定资源的请求逻辑
const dataProvider = {
  ...baseDataProvider,
  getList: (resource, params) => {
    // 匹配商品资源时走自定义请求
    if (resource === 'products') {
      // 直接使用你需要的固定请求地址，不需要框架拼接参数
      return fetchJson(`http://localhost:3000/products/findAll?storeId=1`)
        .then(({ json }) => ({
          // 按照react-admin要求返回固定格式：data为列表数据，total为数据总条数
          data: json,
          total: json.length, // 若接口返回总条数字段，直接替换为对应字段即可
        }));
    }
    // 其他资源保持默认请求逻辑
    return baseDataProvider.getList(resource, params);
  }
};

步骤2：修正Resource配置 #

将name改为纯资源标识，不要携带路径、参数：

return (
    <Admin
      i18nProvider={i18nProvider}
      dataProvider={dataProvider}
      authProvider={authProvider}
    >
      <Resource
        name="products"
        list={PostList}
        create={AddProduct}
        edit={EditPost}
      />
    </Admin>
);

临时替代方案 #

如果你不想修改DataProvider，也可以直接在列表组件上禁用分页、排序能力，框架就不会生成对应查询参数：

const PostList = () => {
  return (
    <List 
      pagination={false} 
      sortable={false} 
      filter={false}
      perPage={9999}
    >
      {/* 原有列表字段逻辑 */}
    </List>
  )
}

注意该方案仅适用于全量获取数据、不需要分页排序的场景，灵活度低于自定义DataProvider方案。

内容的提问来源于stack exchange，提问作者Manuel de la Torre