App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useHarperDB } from 'use-harperdb';

function App() {
  const [data, loading, error, refresh] = useHarperDB({
    query: { operation: 'sql', sql: 'select * from dev.books' }
  });

  const [data2] = useHarperDB({
    query: {
      operation: 'sql',
      sql: 'select count(*) as totalBooks from dev.books'
    }
  });

  console.log(data);
  console.log(error);

  return (
    <div className="App">
      <header className="App-header">
        <img src={loading ? logo : null} className="App-logo" alt="logo" />
        <hr />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        Total Dogs: {data2 ? data2[0].totalBooks : '...'}
        {data ? (
          <pre>{JSON.stringify(data)}</pre>
        ) : error ? (
          <div style={{ color: 'red' }}>error: {error || 'false'}</div>
        ) : (
          <div>Loading</div>
        )}
      </header>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { HarperDBProvider } from 'use-harperdb';

ReactDOM.render(
  <React.StrictMode>
    <HarperDBProvider
      url="https://cloud-1-buildapps.harperdbcloud.com/"
      user="webuser"
      password="user"
    >
      <App />
    </HarperDBProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();