score:1

Accepted answer

I found the answer. To make work, you need to pass the authorization token as a parameter in the dataProvider function wrapper, and using react-cookie, you can use all the power of states and React Hooks. It's like magic:

import React from 'react';
import { Admin, Resource } from 'react-admin';
import Dashboard from './Dashboard';
import hasuraDataProvider from 'ra-data-hasura';
import authProvider from './authProvider';
import {useCookies} from "react-cookie";
import { AssociadoList, AssociadoShow } from "./Associado";
import portugueseMessages from 'ra-language-portuguese'


const dataProvider = function (authToken) {
  const dataProvider = hasuraDataProvider("http://localhost:8080", { "content-type": "application/json", "Authorization": "Bearer " +  authToken});
  return dataProvider;
}
const messages = {
  'pt': portugueseMessages,
};
const i18nProvider = locale => messages[locale];
function App() {
  const [cookies] = useCookies(['authToken']);
  return (
    <Admin
      dataProvider={dataProvider(cookies.authToken)}
      authProvider={authProvider}
      dashboard={Dashboard}
      locale="pt" i18nProvider={i18nProvider}
    >
      <Resource name="adear.associado" list={AssociadoList} options={{ label: 'Associado' }} show={AssociadoShow} />
    </Admin>
  );
}

export default App;

score:1

My take is that you have a small issue with your custom dataProvider.

You are trying to enhance the hasura data provider, but by doing so, you are introducing a small bug.

import React from 'react';
import { Admin, Resource } from 'react-admin';
import Dashboard from './Dashboard';
import hasuraDataProvider from 'ra-data-hasura';
import authProvider from './authProvider';
import Cookies from 'universal-cookie';
import { AssociadoList, AssociadoShow } from "./Associado";
import portugueseMessages from 'ra-language-portuguese'


const dataProvider = function () {
  const cookies = new Cookies();
  // hasuraDataProvider is a factory, which returns a function
  const dataProvider = hasuraDataProvider(process.env.REACT_APP_HASURA_URL, { "content-type": "application/json", "Authorization": "Bearer " + cookies.get("AuthToken") });
  return dataProvider; // Here you are returning the real dataprovider
}

const messages = {
  'pt': portugueseMessages,
};

const i18nProvider = locale => messages[locale];

function App() {
  return (
    <Admin
      {/* dataProvider is a function which returns the hasura dataProvider, but React Admin expects to get your function results instead! */}
      dataProvider={dataProvider}
      authProvider={authProvider}
      dashboard={Dashboard}
      locale="pt" i18nProvider={i18nProvider}
    >
      <Resource name="adear.associado" list={AssociadoList} options={{ label: 'Associado' }} show={AssociadoShow} />
    </Admin>
  );
}

export default App;

IMHO, the fix is as simple as calling your dataProvider function when passing the prop to the admin.

-    dataProvider={dataProvider}
+    dataProvider={dataProvider()}

Related Query

More Query from same tag