如何在React Admin中对接NestJS后端的自定义接口

1. 直接在组件中发起请求 #

如果只是在单个组件中调用该接口，直接使用fetch或axios即可，无需修改React Admin的数据提供者：

import { useState, useEffect } from 'react';

const UserCustomView = ({ record }) => {
  const [result, setResult] = useState(null);

  useEffect(() => {
    if (!record?.id) return;
    
    // 调用NestJS自定义接口，注意替换实际的API域名/前缀
    fetch(`/api/custom-endpoint/${record.id}`)
      .then(res => {
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json();
      })
      .then(data => setResult(data.data))
      .catch(err => console.error('接口调用出错:', err));
  }, [record?.id]);

  return (
    <div>
      {result ? (
        <p>接口返回内容：{result.example}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

export default UserCustomView;

2. 扩展数据提供者实现复用 #

如果需要在多个组件中调用该接口，推荐扩展React Admin的数据提供者，统一管理自定义接口：

第一步：扩展数据提供者 #

// src/dataProvider.js
import { simpleRestProvider } from 'ra-data-simple-rest';

// 基础REST数据提供者
const baseProvider = simpleRestProvider('http://your-nestjs-api-domain');

// 扩展自定义方法
const customDataProvider = {
  ...baseProvider,
  getCustomUserInfo: async (userId) => {
    const response = await fetch(`http://your-nestjs-api-domain/custom-endpoint/${userId}`);
    if (!response.ok) throw new Error('自定义接口请求失败');
    return await response.json();
  }
};

export default customDataProvider;

第二步：在组件中调用自定义方法 #

import { useDataProvider } from 'react-admin';
import { useState, useEffect } from 'react';

const UserCustomView = ({ record }) => {
  const dataProvider = useDataProvider();
  const [result, setResult] = useState(null);

  useEffect(() => {
    if (!record?.id) return;
    
    dataProvider.getCustomUserInfo(record.id)
      .then(data => setResult(data.data))
      .catch(err => console.error('接口调用出错:', err));
  }, [record?.id, dataProvider]);

  return (
    <div>
      {result ? (
        <p>接口返回内容：{result.example}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

export default UserCustomView;

3. 关键注意事项 #

• 跨域配置：如果NestJS后端和React Admin前端不在同一域名，需要在NestJS的main.ts中配置CORS：

// NestJS main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 允许React Admin域名跨域请求
  app.enableCors({
    origin: 'http://your-react-admin-domain',
    credentials: true,
  });
  await app.listen(3000);
}
bootstrap();

• 接口路径对齐：确保请求URL和NestJS接口定义一致，如果NestJS设置了全局前缀（如/api），请求时要带上该前缀。
• 错误处理：务必添加异常捕获，处理网络错误、接口返回非200状态码等情况。

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