react-admin 中可以有多个 dataProviders 吗?

IT技术 reactjs react-admin
2021-05-23 07:08:22

如果我有多个不同的 REST API 后端(单独的应用程序做不同的事情),并且我想要一个能够对由这些不同后端管理的实体执行 CRUD 的单个 UI(基于 React 管理的)应用程序,我我很好奇是否可以连接 react-admin 来做到这一点。

我想象的是,而不是这个(单个/全局数据提供者):

const App = () => (
    <Admin dataProvider={simpleRestProvider('http://path.to.foo.api')}>
        <Resource name="foos" list={FooList} />
    </Admin>
);

我们可以做这样的事情(特定于资源的数据提供者):

    const App = () => (
        <Admin >
            <Resource name="foos" list={FooList} 
               dataProvider={simpleRestProvider('http://path.to.foo.api')} />
            <Resource name="bars" list={BarList} 
               dataProvider={simpleRestProvider('http://path.to.bar.api')} />
        </Admin>
    );

无论如何,如果您对我如何在 react-admin 中对多个后端执行 REST 有任何建议,我将不胜感激。

4个回答

不,但您可以拥有一个超级数据提供者,它会根据资源选择适当的数据提供者。就像是:

const dataProviders = [
    { dataProvider: simpleRestProvider('http://path.to.foo.api'), resources: ['foos'] },
    { dataProvider: simpleRestProvider('http://path.to.bar.api'), resources: ['bars'] },
];

export default (type, resource, params) => {
    const dataProviderMapping = dataProviders.find(dp => dp.resources.includes(resource));

    return dataProviderMapping.dataProvider(type, resource, params);
}

解决方案 2021,React 管理版本 3.12.x 以上

我从@Gildas Garcia 的回答中得到了这个想法。非常感谢@Gildas Garcia。但是您的代码仅适用于 React admin 版本 2,在版本 3 及更高版本中,我需要一些习惯才能使其工作。这是我的解决方案

// ... others import
import {
  fetchUtils,
  GET_LIST,
  GET_ONE,
  CREATE,
  UPDATE,
  UPDATE_MANY,
  DELETE,
  GET_MANY,
  GET_MANY_REFERENCE,
} from 'react-admin';

const dataProviders = [ 
  {
    dataProvider: simpleRestProvider('http://localhost:3000'),
    resources: ['users'],
  },
  {
    dataProvider: simpleRestProvider('http://localhost:3002'),
    resources: ['roles'],
  },
  {
    dataProvider: customJSONDataProvider('http://localhost:3003'),
    resources: ['permissions'],
  },
];

export default (type, resource, params) => {
  const dataProviderMapping = dataProviders.find((dp) =>
    dp.resources.includes(resource));

  const mappingType = {
    [GET_LIST]: 'getList',
    [GET_ONE]: 'getOne',
    [GET_MANY]: 'getMany',
    [GET_MANY_REFERENCE]: 'getManyReference',
    [CREATE]: 'create',
    [UPDATE]: 'update',
    [UPDATE_MANY]: 'updateMany',
    [DELETE]: 'delete',
  };

  return dataProviderMapping.dataProvider[mappingType[type]](resource, params);
};

React Admin 3 为 dataProviders 使用了一个新接口,所有的答案似乎都只适用于 React Admin 2。

这是我为使 React Admin 3 正常工作所做的工作:

class CompositeDataProvider {
  constructor(dataProviders) {
    this.dataProviders = dataProviders;
  }

  _delegate(name, resource, params) {
    const { dataProvider } = this.dataProviders.find((dp) =>
      dp.resources.includes(resource)
    );

    return dataProvider[name](resource, params);
  }

  getList(resource, params) {
    return this._delegate("getList", resource, params);
  }
  getOne(resource, params) {
    return this._delegate("getOne", resource, params);
  }
  getMany(resource, params) {
    return this._delegate("getMany", resource, params);
  }
  getManyReference(resource, params) {
    return this._delegate("getManyReference", resource, params);
  }
  create(resource, params) {
    return this._delegate("create", resource, params);
  }
  update(resource, params) {
    return this._delegate("update", resource, params);
  }
  updateMany(resource, params) {
    return this._delegate("updateMany", resource, params);
  }
  delete(resource, params) {
    return this._delegate("delete", resource, params);
  }
  deleteMany(resource, params) {
    return this._delegate("deleteMany", resource, params);
  }
}

export default CompositeDataProvider;

然后你可以这样使用它:

const dataProvider = new compositeDataProvider([
  {
    dataProvider: jsonServerProvider("https://jsonplaceholder.typicode.com"),
    resources: ["posts", "users"],
  },
  {
    dataProvider: simpleRestProvider("http://path.to.bar.api"),
    resources: ["bars"],
  },
]);

它仍然是准系统,但它为您提供了一个可以改进的想法。

最近的 ra 版本 (3.4.1)自述文件中,有一节(扩展数据提供程序(文件上传示例))提到:“……将两个后端的两个数据提供程序组合成一个对象…… ”。您可以编写带有分支的包装器以中继到不同提供者的实现。在他们的演示之上添加你的真实数据提供者的一个例子是:

// new file dataProvider/super.js
import simpleRestProvider from 'ra-data-simple-rest';
import delayedDataProvider from './rest'

const realDataProvider = simpleRestProvider('http://real_world_url/');

const myDataProvider = {
    ...delayedDataProvider,
    getList: (resource, params) => {
        console.log(resource)
        if (["customers", "reviews", "commands"].includes(resource)) {
            // resources for the demo
            return delayedDataProvider.getList(resource, params)
        } else {
            // your own resources
            return realDataProvider.getList(resource, params)
        }
    },
};

export default myDataProvider;

并用上面的 myDataProvider 替换 delayDataProvider

// file dataProvider/index.js
         case 'graphql':
             return import('./graphql').then(factory => factory.default());
         default:
-            return import('./rest').then(provider => provider.default);
+            return import('./super').then(provider => provider.default);

免责声明:我遇到了与之前帖子相同的错误“提供程序不起作用......”