CODEWITHSUNDEEP
javascriptreactjsadmin-on-rest
pashakondratyev
pashakondratyev

Reputation: 9

Can't display data from REST call, even though the server is sending data

I am trying to perform a rest call with a token in the header to display information. There is a required header token so my code looks like this for my restClient.js, app.js, and users.js.

//restClient.js
import { jsonServerRestClient, fetchUtils } from 'admin-on-rest';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    options.headers.set('token', 'admin');
    return fetchUtils.fetchJson(url, options);
}

const restClient = jsonServerRestClient('http://localhost:8080/api/v2', httpClient);

export default (type, resource, params) => new Promise(resolve => setTimeout(() => resolve(restClient(type, resource, params)), 500));

//App.js
import React, {Component} from 'react';
import { Admin, Resource } from 'admin-on-rest';

import { UserList } from './users';
import restClient from './restClient';

class App extends Component {
  render() {
    return(
          <Admin restClient={restClient}>
              <Resource name="admin/user" list={UserList}/>
          </Admin>
    );
  }
}
export default App;

//Users.js
// in src/users.js
import React from 'react';
import { List, Datagrid, EmailField, TextField, SimpleList } from 'admin-on-rest';

export const UserList = (props) => (
    <List {...props}>
        <Datagrid >
            <TextField source="email"/>
            <TextField source="info"/>
        </Datagrid>
    </List>
);

Example of JSON

I've tested my rest call with postman and it is definitely returning data. Also is there anyway to check what data is being sent back in the call? The server is running express.js and I've set up the route to include the required headers.I've also attached an example of what my JSON looks like that I am returning.

Upvotes: 0

Views: 477

Answers (2)

kunal pareek
kunal pareek

Reputation: 1283

Since aor fetchUtils returns a promise. you can intercept the promise and perform any kind of inspection you want (and do a lot more too)

Below is how my code is handling something similar. I am also intercepting the API call and displaying custom notifications. 

function handleRequestAndResponse(url, options={}) {
  return fetchUtils.fetchJson(url, options)
    .then((response) => {
      const {headers, json} = response;
      //admin on rest needs the {data} key
      const data = {data: json}
      if (headers.get('x-total-count')) {
        data.total = parseInt(headers.get('x-total-count').split('/').pop(), 10)
      }
      // handle get_list responses
      if (!isNaN(parseInt(headers.get('x-total-count'), 10))) {
        return {data: json,
                total: parseInt(headers.get('x-total-count').split('/').pop(), 10)}
      } else {
        return data
      }
  })
}

You can simply do something like below

return fetchUtils.fetchJson(url, options)
.then(res => {
    console.log(res)
    return res
})

Upvotes: 1

rjustin
rjustin

Reputation: 1439

I dont have the reputation to comment yet but Fiddler 4 is a good way to see what the UI is sending to the server.

Upvotes: 0

Related Questions