React restClient admin-on-rest

Question

admin-on-rest允许通过编写自定义rest客户端来使用任何JSON响应。文档中的示例用于从json-server project中消费JSON，这很简单。

我想知道只需对restClient稍作更改，即可在静态管理中使用this api有多容易。

Answer 1

好的--让我们来看看rest上的管理源代码(文件admin- on -rest/src/util/fetch.js)，我们使用的是fetchJson方法。

该方法返回fetch promise，其中它尝试解析代码中json：

try {
  json = JSON.parse(body);
} catch (e) {
  // not json, no big deal
}

然后它返回那个：return { status, headers, body, json };

但是我们在结果中有body，并且可以重用它，或者我们可以在json中使用解析的对象。

对于您的示例，我们可能会这样做(一些代码遗漏)：

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    options.withCredentials = true;
        return fetchUtils.fetchJson(url, options).then(({status, headers, body, json}) => {
        json = json['results'] ? json['results'] : json;
        return {status, headers, body, json};
    });
}

所以我们只是通过模式中'results‘集合覆盖了json对象：

json = json['results'] ? json['results'] : json;

现在您可以在Admin中使用该客户端

<Admin restClient={restClient}>
...
</Admin>

警告！这将影响到管理员的所有请求。但您可以添加额外的参数。如果您不想使用json = json['results'] ? json['results'] : json;，可以添加其他参数或签入方法fetch

Answer 2

如果我没记错的话，您希望将url从：https://marmelab.com/admin-on-rest-demo/#/customers/684重写为：https://marmelab.com/admin-on-rest-demo/?customers=684 (例如)

您可以将restClient.js: case GET_ONE: url = ${apiUrl}/${resource}/${params.id}；中的GET_ONE重写为: case GET_ONE: url = ${apiUrl}/?${resource}=${params.id}；

THis将通过参数而不是url部分来检索记录。