ra-data-hasura

react-admin data provider for Hasura GraphQL Engine

Installation

$ npm install --save ra-data-hasura

Usage

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'

// The following components are created when following the react-admin tutorial
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 = () => (
  <Admin
    dataProvider={hasuraDataProvider('http://localhost:8080', headers)}
    authProvider={authProvider}
    dashboard={Dashboard}
  >
    <Resource
      name="posts"
      icon={PostIcon}
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
      show={PostShow}
    />
    <Resource name="users" icon={UserIcon} list={UserList} />
    <Resource name="comments" list={ListGuesser} />
  </Admin>
)

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="test.author" 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.

Contributing

To modify, extend and test this package locally,

$ cd ra-data-hasura
$ npm 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.