API URL with Node Server and react-admin

Question

I'm trying to connect react-admin: https://github.com/marmelab/react-admin and a Node server: https://github.com/hagopj13/node-express-mongoose-boilerplate

I have users in database and i can sing-in with the react-admin. But when i want to show the list of users, i get this error:

fetch.js:39 GET http://localhost:4000/v1/users?filter=%7B%7D&range=%5B0%2C24%5D&sort=%5B%22createdAt%22%2C%22DESC%22%5D 401 (Unauthorized)

I don't know what to modify on the server to accept the request .

I'm a litte lost, i need help to start, do you have example that work with react-admin? What files i need to modify?

Update: My dataprovider in react-admin

import { fetchUtils } from "react-admin";
import { stringify } from "query-string";

const apiUrl = "http://localhost:4000/v1";
const httpClient = fetchUtils.fetchJson;

export default {
  getList: (resource, params) => {
    console.log(params.pagination);
    console.log(params.sort);
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query = {
      sort: JSON.stringify([field, order]),
      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
      filter: JSON.stringify(params.filter)
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;

    return httpClient(url).then(({ headers, json }) => ({
      data: json,
      total: parseInt(
        headers
          .get("content-range")
          .split("/")
          .pop(),
        10
      )
    }));
  },

  getOne: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`).then(({ json }) => ({
      data: json
    })),

  getMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids })
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;
    return httpClient(url).then(({ json }) => ({ data: json }));
  },

  getManyReference: (resource, params) => {
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query = {
      sort: JSON.stringify([field, order]),
      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
      filter: JSON.stringify({
        ...params.filter,
        [params.target]: params.id
      })
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;

    return httpClient(url).then(({ headers, json }) => ({
      data: json,
      total: parseInt(
        headers
          .get("content-range")
          .split("/")
          .pop(),
        10
      )
    }));
  },

  update: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`, {
      method: "PUT",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({ data: json })),

  updateMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids })
    };
    return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
      method: "PUT",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({ data: json }));
  },

  create: (resource, params) =>
    httpClient(`${apiUrl}/${resource}`, {
      method: "POST",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({
      data: { ...params.data, id: json.id }
    })),

  delete: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`, {
      method: "DELETE"
    }).then(({ json }) => ({ data: json })),

  deleteMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids })
    };
    return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
      method: "DELETE",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({ data: json }));
  }
};

Thanks & Regards

score 2 · Answer 1 · answered Feb 12 '20 at 07:05

2

you are missing the JWT token from the header of the request ,thats why you get 401 code , the route /v1/users protected with auth middleware .get(auth('getUsers'), validate(userValidation.getUser), userController.getUser) in routes/v1/user.route.js

in middlewares/auth.js passport.authenticate('jwt', { session: false }, verifyCallback(req, resolve, reject, requiredRights))(req, res, next);

answered Feb 12 '20 at 07:05

A.Abdelhak

140
4

Thank you. So i'm using a wrong dataprovider in the react-admin... I understand a little bit more how all the files in the server working. And i will try to make it work by changing the dataprovider in react-admin. Do you have an exemple that already work with this server? I don't see one in this list: https://github.com/marmelab/react-admin/blob/master/docs/DataProviders.md – Ludo Feb 17 '20 at 05:41

API URL with Node Server and react-admin

1 Answers1