graphql-engine/community/tools/ra-data-hasura

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 two arguments:

• serverEndpoint - The URL at which Hasura GraphQL Engine is running. (for example: http://localhost:8080). This is required.

• headers - An optional argument. Pass your auth headers here.

hasuraDataProvider(serverEndpoint, headers)

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 = () => (
  <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.

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} />

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 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.