A React Hook for accessing HarperDB.
🚀 Getting Started
HarperDB has a built-in http API, which means you can query data directly from within your client-side application. This React hook makes it easy to keep track of the loading, error, and data state of those queries.
React Version Note: React Hooks require React 16.8.0+
Client-Side Security Note: For a public, web-based application, NEVER use the default (super-user) account. Super-Users have unrestricted access to the database- they can add/drop schemas and tables, so they could delete all your data.
Instead, create a web-specific user that only has read/write/update/delete access to the specific tables they require.
For queries where users should only have access to specific ROWS of data (for example):
SELECT * FROM dev.dog WHERE owner_id = 2
...you'll still need to implement a server-side API to prevent the user from simply swapping out the
2 for some other
Install the hook
npm i -s use-harperdb
yarn add use-harperdb
Add the HarperDBProvider to your index.js file
import React from 'react';import ReactDOM from 'react-dom';import App from './App';import HarperDBProvider from 'use-harperdb';ReactDOM;
- Executes a HarperDB operation using the Provider's url, user, and password
- (optionally) set up an
intervalto re-run the operation
||Object||The HarperDB operation you wish to execute|
||Integer||(optional) rate in ms to re-run the query|
import React from 'react';import './App.css';import useHarperDB from 'use-harperdb';import loadingLogo from './logo-loading.svg';import logo from './logo.svg';// primary request, re-run every 5 secondsconst data loading error refresh = ;// secondary request, no interval, not making use of loading, error, or refreshconst data2 = ;return<div ="App"><header ="App-header"><img = ="App-logo" ="logo" /><button =>refresh</button>Total Dogs: data2 ? data20totalDogs : '...'data ?<pre>JSON</pre>: error ?<div =>error: error || 'false'</div>:<div>Loading</div></header></div>;