add react-admin data provider (close #783) (#1407)

This commit is contained in:
Praveen Durairaj 2019-01-19 20:49:35 +05:30 committed by Shahidh K Muhammed
parent d454dd8fed
commit 2022091391
10 changed files with 10329 additions and 0 deletions

View File

@ -0,0 +1,11 @@
{
"presets": ["env"],
"plugins": ["babel-plugin-add-module-exports"],
"env": {
"test": {
"plugins": [
["istanbul"]
]
}
}
}

View File

@ -0,0 +1,179 @@
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"globals": {
"document": false,
"escape": false,
"navigator": false,
"unescape": false,
"window": false,
"describe": true,
"before": true,
"it": true,
"expect": true,
"sinon": true
},
"parser": "babel-eslint",
"plugins": [
],
"rules": {
"block-scoped-var": 2,
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"camelcase": [2, { "properties": "never" }],
"comma-dangle": [2, "never"],
"comma-spacing": [2, { "before": false, "after": true }],
"comma-style": [2, "last"],
"complexity": 0,
"consistent-return": 2,
"consistent-this": 0,
"curly": [2, "multi-line"],
"default-case": 0,
"dot-location": [2, "property"],
"dot-notation": 0,
"eol-last": 2,
"eqeqeq": [2, "allow-null"],
"func-names": 0,
"func-style": 0,
"generator-star-spacing": [2, "both"],
"guard-for-in": 0,
"handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
"indent": [2, 2, { "SwitchCase": 1 }],
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
"keyword-spacing": [2, {"before": true, "after": true}],
"linebreak-style": 0,
"max-depth": 0,
"max-len": [2, 120, 4],
"max-nested-callbacks": 0,
"max-params": 0,
"max-statements": 0,
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
"newline-after-var": [2, "always"],
"new-parens": 2,
"no-alert": 0,
"no-array-constructor": 2,
"no-bitwise": 0,
"no-caller": 2,
"no-catch-shadow": 0,
"no-cond-assign": 2,
"no-console": 0,
"no-constant-condition": 0,
"no-continue": 0,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-div-regex": 0,
"no-dupe-args": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-else-return": 2,
"no-empty": 0,
"no-empty-character-class": 2,
"no-eq-null": 0,
"no-eval": 2,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": 0,
"no-extra-semi": 0,
"no-extra-strict": 0,
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inline-comments": 0,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": 2,
"no-lone-blocks": 0,
"no-lonely-if": 0,
"no-loop-func": 0,
"no-mixed-requires": 0,
"no-mixed-spaces-and-tabs": [2, false],
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-multiple-empty-lines": [2, { "max": 1 }],
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-nested-ternary": 0,
"no-new": 2,
"no-new-func": 2,
"no-new-object": 2,
"no-new-require": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 0,
"no-plusplus": 0,
"no-process-env": 0,
"no-process-exit": 0,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-reserved-keys": 0,
"no-restricted-modules": 0,
"no-return-assign": 2,
"no-script-url": 0,
"no-self-compare": 2,
"no-sequences": 2,
"no-shadow": 0,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-sync": 0,
"no-ternary": 0,
"no-throw-literal": 2,
"no-trailing-spaces": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-undefined": 0,
"no-underscore-dangle": 0,
"no-unneeded-ternary": 2,
"no-unreachable": 2,
"no-unused-expressions": 0,
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
"no-use-before-define": 2,
"no-var": 0,
"no-void": 0,
"no-warning-comments": 0,
"no-with": 2,
"one-var": 0,
"operator-assignment": 0,
"operator-linebreak": [2, "after"],
"padded-blocks": 0,
"quote-props": 0,
"quotes": [2, "single", "avoid-escape"],
"radix": 2,
"semi": [2, "always"],
"semi-spacing": 0,
"sort-vars": 0,
"space-before-blocks": [2, "always"],
"space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
"space-in-brackets": 0,
"space-in-parens": [2, "never"],
"space-infix-ops": 2,
"space-unary-ops": [2, { "words": true, "nonwords": false }],
"spaced-comment": [2, "always"],
"strict": 0,
"use-isnan": 2,
"valid-jsdoc": 0,
"valid-typeof": 2,
"vars-on-top": 2,
"wrap-iife": [2, "any"],
"wrap-regex": 0,
"yoda": [2, "never"]
}
}

View File

@ -0,0 +1,35 @@
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
lib
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
# Remove some common IDE working directories
.idea
.vscode
.DS_Store

View File

@ -0,0 +1,33 @@
// assuming app.js inside src/App.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'};
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;

View File

@ -0,0 +1,84 @@
# 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 access key or auth, configure the appropriate headers and pass it to the provider.
## 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.

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,53 @@
{
"name": "ra-data-hasura",
"version": "0.0.1",
"description": "react-admin data provider for Hasura GraphQL Engine",
"main": "lib/ra-data-hasura.min.js",
"scripts": {
"build": "webpack --env dev && webpack --env build",
"dev": "webpack --progress --colors --watch --env dev",
"repl": "node -i -e \"$(< ./lib/ra-data-hasura.js)\""
},
"repository": {
"type": "git",
"url": "https://github.com/hasura/graphql-engine.git"
},
"keywords": [
"react-admin",
"library",
"admin",
"hasura",
"postgres"
],
"author": "Praveen Durairaj <praveen@hasura.io>",
"license": "MIT",
"bugs": {
"url": "https://github.com/hasura/graphql-engine/issues"
},
"homepage": "https://github.com/hasura/graphql-engine",
"devDependencies": {
"@babel/cli": "^7.0.0-beta.51",
"@babel/core": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-istanbul": "^5.1.0",
"babel-preset-env": "^7.0.0-beta.3",
"babel-register": "^7.0.0-beta.3",
"cross-env": "^5.2.0",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"jsdom": "11.11.0",
"jsdom-global": "3.0.2",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.12.2",
"webpack-cli": "^3.0.8",
"yargs": "^10.0.3",
"nyc": "^13.1.0"
},
"nyc": {
"sourceMap": false,
"instrument": false
}
}

View File

@ -0,0 +1,195 @@
import {
bulkQuery,
selectQuery,
countQuery,
insertQuery,
updateQuery,
deleteQuery
} from './queries';
const cloneQuery = (query) => {
return JSON.parse(JSON.stringify(query));
};
export default (serverEndpoint, headers) => {
const convertDataRequestToHTTP = (type, resource, params) => {
const options = {};
let finalQuery = {};
switch (type) {
case 'GET_LIST':
// select multiple
const finalSelectQuery = cloneQuery(selectQuery);
const finalCountQuery = cloneQuery(countQuery);
finalSelectQuery.args.table = resource;
finalSelectQuery.args.limit = params.pagination.perPage;
finalSelectQuery.args.offset = (params.pagination.page * params.pagination.perPage) - params.pagination.perPage;
finalSelectQuery.args.where = params.filter;
finalSelectQuery.args.order_by = {column: params.sort.field, type: params.sort.order.toLowerCase()};
finalCountQuery.args.table = resource;
finalQuery = cloneQuery(bulkQuery);
finalQuery.args.push(finalSelectQuery);
finalQuery.args.push(finalCountQuery);
break;
case 'GET_ONE':
// select one
finalQuery = cloneQuery(selectQuery);
finalQuery.args.table = resource;
finalQuery.args.where = { id: { '$eq': params.id } };
break;
case 'CREATE':
// create one
const createFields = Object.keys(params.data);
finalQuery = cloneQuery(insertQuery);
finalQuery.args.table = resource;
finalQuery.args.objects.push(params.data);
// id is mandatory
createFields.push('id');
finalQuery.args.returning = createFields;
break;
case 'UPDATE':
// update one
const updateFields = Object.keys(params.data);
finalQuery = cloneQuery(updateQuery);
finalQuery.args.table = resource;
finalQuery.args['$set'] = params.data;
finalQuery.args.where = { id: { '$eq': params.id }};
// id is mandatory
updateFields.push('id');
finalQuery.args.returning = updateFields;
break;
case 'UPDATE_MANY':
// update multiple ids with given data
const updateManyFields = Object.keys(params.data);
finalQuery = cloneQuery(updateQuery);
finalQuery.args.table = resource;
finalQuery.args['$set'] = params.data;
finalQuery.args.where = { 'id': { '$in': params.ids } };
// id is mandatory
updateManyFields.push('id');
finalQuery.args.returning = updateManyFields;
break;
case 'DELETE':
// delete one
const deleteFields = Object.keys(params.previousData);
finalQuery = cloneQuery(deleteQuery);
finalQuery.args.table = resource;
finalQuery.args.where = { id: { '$eq': params.id }};
// id is mandatory
deleteFields.push('id');
finalQuery.args.returning = deleteFields;
break;
case 'DELETE_MANY':
// delete multiple
finalQuery = cloneQuery(deleteQuery);
finalQuery.args.table = resource;
finalQuery.args.where = { 'id': { '$in': params.ids } };
// id is mandatory
finalQuery.args.returning = ['id'];
break;
case 'GET_MANY':
// select multiple within where clause
finalQuery = cloneQuery(selectQuery);
finalQuery.args.table = resource;
finalQuery.args.where = { 'id': { '$in': params.ids } };
break;
case 'GET_MANY_REFERENCE':
// select multiple with relations
const finalManyQuery = cloneQuery(selectQuery);
const finalManyCountQuery = cloneQuery(countQuery);
finalSelectQuery.args.table = resource;
finalSelectQuery.args.limit = params.pagination.perPage;
finalSelectQuery.args.offset = (params.pagination.page * params.pagination.perPage) - params.pagination.perPage;
finalSelectQuery.args.where = { [params.target]: params.id };
finalSelectQuery.args.order_by = {column: params.sort.field, type: params.sort.order.toLowerCase()};
finalCountQuery.args.table = resource;
finalQuery = cloneQuery(bulkQuery);
finalQuery.args.push(finalManyQuery);
finalQuery.args.push(finalManyCountQuery);
break;
default:
throw new Error(`Unsupported type ${type}`);
};
options.body = JSON.stringify(finalQuery);
return { options };
};
const convertHTTPResponse = (response, type, resource, params) => {
// handle errors and throw with the message
if ('error' in response || 'code' in response) {
throw new Error(JSON.stringify(response));
}
switch (type) {
case 'GET_LIST':
return {
data: response[0],
total: response[1]['count']
};
case 'GET_ONE':
return {
data: response[0]
};
case 'CREATE':
return {
data: response.returning[0]
};
case 'UPDATE':
return {
data: response.returning[0]
};
case 'UPDATE_MANY':
const updatedIds = response.returning.map((item) => {
return item.id;
});
return {
data: updatedIds
};
case 'DELETE':
return {
data: response.returning[0]
};
case 'DELETE_MANY':
const deletedIds = response.returning.map((item) => {
return item.id;
});
return {
data: deletedIds
};
case 'GET_MANY':
return {
data: response
};
case 'GET_MANY_REFERENCE':
return {
data: response[0],
total: response[1].count
};
default:
return { data: response };
}
};
return (type, resource, params) => {
const { options } = convertDataRequestToHTTP(
type,
resource,
params
);
options.method = 'POST';
options.headers = headers;
return fetch(serverEndpoint + '/v1/query', options).then(function (response) {
return response.json().then((data) => {
return convertHTTPResponse(data, type, resource, params);
});
});
};
};

View File

@ -0,0 +1,52 @@
// define hasura json api queries
const bulkQuery = {
type: 'bulk',
args: []
};
const selectQuery = {
type: 'select',
args: {
table: '',
columns: ['*']
}
};
const countQuery = {
type: 'count',
args: {
table: '',
where: { id: { '$gt': 0 }}
}
};
const insertQuery = {
type: 'insert',
args: {
table: '',
objects: [],
returning: []
}
};
const updateQuery = {
type: 'update',
args: {
table: '',
$set: {},
where: {},
returning: []
}
};
const deleteQuery = {
type: 'delete',
args: {
table: '',
where: {},
returning: []
}
};
export { bulkQuery, selectQuery, countQuery, insertQuery, updateQuery, deleteQuery };

View File

@ -0,0 +1,60 @@
/* global __dirname, require, module*/
const webpack = require('webpack');
const path = require('path');
const env = require('yargs').argv.env; // use --env with webpack 2
const pkg = require('./package.json');
let libraryName = pkg.name;
let outputFile, mode;
if (env === 'build') {
mode = 'production';
outputFile = libraryName + '.min.js';
} else {
mode = 'development';
outputFile = libraryName + '.js';
}
const config = {
mode: mode,
entry: __dirname + '/src/index.js',
devtool: 'inline-source-map',
output: {
path: __dirname + '/lib',
filename: outputFile,
library: libraryName,
libraryTarget: 'umd',
umdNamedDefine: true,
globalObject: "typeof self !== 'undefined' ? self : this"
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
/*
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
*/
]
},
resolve: {
modules: [path.resolve('./node_modules'), path.resolve('./src')],
extensions: ['.json', '.js']
},
externals: {
react: 'react',
'react-dom': 'react-dom',
'react-admin': 'react-admin',
'@material-ui': '@material-ui'
}
};
module.exports = config;