mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-19 21:41:44 +03:00
96 lines
2.5 KiB
Markdown
96 lines
2.5 KiB
Markdown
# ra-data-hasura
|
|
|
|
> [react-admin](https://github.com/marmelab/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.
|
|
|
|
```js
|
|
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.
|
|
|
|
|