Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ra-data-hasura with all npm packages installed. Try it out:

var raDataHasura = require("ra-data-hasura")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ra-data-hasura v0.0.7

react-admin data provider for Hasura GraphQL Engine


react-admin data provider for Hasura GraphQL Engine


$ npm install --save ra-data-hasura


The ra-data-hasura provider accepts three arguments:

  • serverEndpoint - The URL at which Hasura GraphQL Engine is running. (for example: http://localhost:8080). This is required. It should also expose /v1/query endpoint.

  • httpClient - HTTP Client function. To maintain backwards compatibility the headers object is supported.

  • config - An optional argument. Pass your config here.

hasuraDataProvider(serverEndpoint, httpClient, config)

In the following example, we import hasuraDataProvider from ra-data-hasura and give it the hasura server endpoint (assumed to be running at http://localhost:8080) and an optional headers object.

import React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/Group';
import { Admin, Resource, ListGuesser } from 'react-admin';
import hasuraDataProvider from 'ra-data-hasura';

import { PostList, PostEdit, PostCreate, PostShow } from './posts';
import { UserList } from './users';
import Dashboard from './Dashboard';
import authProvider from './authProvider';

const headers = {'content-type': 'application/json', 'authorization': 'bearer <token>'};
const App = () => (
    dataProvider={hasuraDataProvider('http://localhost:8080', headers)}
    <Resource name="users" icon={UserIcon} list={UserList} />
    <Resource name="comments" list={ListGuesser} />

export default App;

In case the server is configured with admin secret or auth, configure the appropriate headers and pass it to the provider.

Adding Custom Headers

The above example showed a simple use case of adding static headers. In order to update headers dynamically, the data provider accepts an HTTP client function as the second argument. It uses react-admin's fetchUtils.fetchJson() as HTTP client. Hence to add custom headers to your requests, you just need to wrap the fetchUtils.fetchJson() call inside your own function:

const httpClient = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
  // add your own headers here
  options.headers.set('Authorization', 'Bearer xxxxx');
  return fetchUtils.fetchJson(url, options);
const dataProvider = hasuraDataProvider('http://localhost:8080', httpClient);

Multiple schemas

To query schemas other than public, you can pass schema to resource in the format <Resource name="schema.table" />.

For example to fetch data from schema test and table author, use the following snippet:

  <Resource name="" list={list} />

Different Primary Keys

Sometimes the table you are querying might have a primary key other than id. react-admin enforces id to be returned in the response by the DataProvider. But you can configure a different primary key column for specific tables using the config object as below:

const config = { 
  'primaryKey': { 
      'tableName': 'primaryKeyColumn', 'tableName2': 'primaryKeyColumn' 

Known Issues

Filter as you type (search) functionality inside tables is not supported right now. It is a work in progress.


To modify, extend and test this package locally,

$ cd ra-data-hasura
$ npm run link

Now use this local package in your react app for testing

$ cd my-react-app
$ npm link ra-data-hasura

Build the library by running npm run build and it will generate the transpiled version of the library under lib folder.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free