反応フックでharperdbインスタンスを使う方法

HarperDB Cloud CRUD操作のSQLおよびNOSQLクエリをサポートするデータベースサービスです.それは始めるために最小限の構成を必要とします、そして、そのレルムはノードのようなサーバー側技術でREST APIを構築するだけではありません.js
HarperDBは、クライアント側アプリケーションで直接データベースクラウドインスタンスにアクセスする方法を提供します.これは、組み込みのHTTP APIを直接データをクエリすることができます.
このポストでは、HarperDBクラウドデータベースインスタンスを構成し、ReactJSアプリ内のデータベースに問い合わせてデータを取得する方法を見てみましょう.HarperDBは反応フックを提供しますuseHarperDB 我々の仕事をより簡単にするために.

インスタンス用語集

このポストは、HarperDBデータベースの類似したインスタンスを使用します.我々の中のJSprevious post . クラウドインスタンスを設定する方法についての記事をご覧くださいhere . この方法では、データフィールドの人口テーブルがあります.
上記のデータベースインスタンスのスキーマをコールするdev . HarperDBのスキーマが必要です.これは、テーブルのコレクションに相当する.既存のスキーマがない場合は、新しいテーブルを作成することができず、テーブルなしでHarperDBインスタンスでデータを追加または更新できません.
スキーマの下に、1つ以上のテーブルを追加するオプションがあります.上の例では、既に作成されたテーブルがあり、outlets . このテーブルは一意の識別子id データの各行に対して.
右側には、テーブル内のデータが表示されます.つのタイムスタンプフィールドに注意してください.新しい行がテーブルに追加され、自動維持されるたびにHarpRDBによって自動挿入されます.
CreateDate :データを挿入する際にタイムスタンプを記録します.
UpdatedTime :任意のデータフィールドが最後に更新されるときにタイムスタンプを記録します.

クラウドインスタンスを設定したら、ライブラリのバージョンを使用して反応プロジェクトを使用してください16.8.0+ .

始める

新しい反応アプリを作成して起動します.我々はこのポストの例アプリを構築するため、この反応アプリを使用するつもりです.ターミナルウィンドウを開き、次のコマンドを実行します.

npx create-react-app harperdb-integration-react

# after the project directory has been created
cd harperdb-integration-react

# install the following dependency
yarn add [email protected]

今、あなたは行動の反応アプリを見て開発サーバーを起動することができます.ターミナルウィンドウに移動し、コマンドを実行するyarn start . 次の出力をブラウザウィンドウでURLで取得します.http://localhost:3000/ .

カスタムロールを使用したユーザーの作成

既定では、HarperDBクラウドインスタンスで作成されたユーザーはスーパーユーザです.これは、既存のスキーマからテーブルを作成およびドロップするためのデータと権利をクエリおよび追加する管理権を持ち、新しいスキーマを作成および削除します.クライアント側アプリケーションでは、スーパーユーザを必要としません.ほとんどのクライアントアプリケーションが公開されているので、これはデフォルトのユーザーを使用する良い方法ではありません.
これを解決するアプローチは、データテーブル内でCRUD操作のみを行う権限を持つ新しいユーザーを作成することです.HarperDBは、カスタムのユーザーロールを定義する方法と、そのロールを使用して新しいユーザーを作成する方法を提供します.
クラウドインスタンスを開き、タブに移動しますroles from the menu bar .

ここでは、カスタム標準を作成する新しい標準ロールを定義できます.この新しい役割をしましょう.client_user .

新しいロールが作成されると、インスタンスはこのロールを持つ任意のユーザーに割り当てることができる権限を要求します.現在、この特定のロールのテーブルとスキーマへのアクセスを構成することができます.現在は1つのスキーマだけがあり、内部には1つのデータテーブルがあります.この例では、既定の設定を維持し、ボタンの更新ロールのパーミッションを押して進みます.

許可が更新されると、タブに移動しますusers 隣にroles メニューバーで.これは、作成したカスタムロールを使用して新しいユーザーを追加するために使用されます.ドロップダウンメニューからclient_user .

ボタンをクリックして新しいユーザーを追加します.

今、我々はテーブルからデータを照会するクライアント反応アプリでこのカスタムユーザーを使用することができますoutlets .

反応におけるHarperDBの統合

The use-harperdb フック付きHarperDBProvider これは、反応アプリのインスタンスをラップするために使用されますApp コンポーネント全体でindex.js ファイル.これは、データベースインスタンスでCRUD操作を実行するために必須です.
以下のインポート文を内部に追加しますsrc/index.js ファイル

// ... other import statements
import { HarperDBProvider } from 'use-harperdb';

データベースインスタンスでCRUD操作を実行するには、DBインスタンスURL、ユーザー名、およびそのユーザーに関連付けられたパスワードが必要です.環境変数を利用してこれらの値を追加します.
新しいファイルを作成する.env 次の変数を持つプロジェクトのルートで.これらの変数の値は[] しかし、あなたは角括弧とあなた自身の値を交換しなければなりません.

REACT_APP_DB_URL=[Your Cloud Instance Provider URL]
REACT_APP_USER=[The name of the custom user with client_user role]
REACT_APP_PASSWORD=[The password associated with the custom user]

を作成する反応アプリを事前に任意の環境変数を読み取りますREACT_APP . サードパーティライブラリを使用する代わりに、直接これらの環境変数を使用して必要な属性を提供することができますHarperDBProvider .

ReactDOM.render(
  <React.StrictMode>
    <HarperDBProvider
      url={process.env.REACT_APP_DB_URL}
      user={process.env.REACT_APP_USER}
      password={process.env.REACT_APP_PASSWORD}
    >
      <App />
    </HarperDBProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

それです.我々は正常にHarperDBデータベースインスタンスを使用して反応アプリを構成している.

HarperDBからのデータの照会

反応アプリでデータベースインスタンスからデータを照会するにはuseHarperDB フックはそうするための要素を提供します.
開けるApp.js ファイルをインポートしますuse-harperdb . また、取得時にデータを表示するための基本UIを設定しましょう.

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Starbucks Outlets</h2>
        <table>
          <thead style={{ marginBottom: '20px' }}>
            <tr>
              <td style={{ textTransform: 'uppercase' }}>City</td>
              <td style={{ textTransform: 'uppercase' }}>Name</td>
              <td style={{ textTransform: 'uppercase' }}>Latitude</td>
              <td style={{ textTransform: 'uppercase' }}>Longitude</td>
            </tr>
          </thead>
          <tbody>
            <tr>{/* TODO: display data from query */}</tr>
          </tbody>
        </table>
      </header>
    </div>
  );
}

export default App;

フックを使用するルールは、機能コンポーネント内でのみ消費できることです.The useHarperDB フックは要素を配列で与え、data を返します.また、

loading クエリが実行されているかどうかをユーザーに知らせることができます

error データの問い合わせ時にエラーが発生したかどうかを判断する

refresh データを取得できる機能です

データベースインスタンスからデータを照会するには、フックの中にオブジェクトを渡します.
次のスニペットクエリをApp.js データベースからすべてのデータを取得するファイル.

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

  //...
}

上記のスニペットでは、interval 渡されるのは、明示的に使用したくないときに使うオプションですrefresh 関数.これはミリ秒単位で値を受け取ります.
JSXを加えましょうloading and error 使用によってif/else 内部の構文App コンポーネント.

function App() {
  // ...

  if (loading) {
    return <div>Loading ...</div>;
  }

  if (error && data.length === 0) {
    return <div>Error, no data found</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h2>Starbucks Outlets</h2>
        <table>
          <thead style={{ marginBottom: '20px' }}>
            <tr>
              <td style={{ textTransform: 'uppercase' }}>City</td>
              <td style={{ textTransform: 'uppercase' }}>Name</td>
              <td style={{ textTransform: 'uppercase' }}>Latitude</td>
              <td style={{ textTransform: 'uppercase' }}>Longitude</td>
            </tr>
          </thead>
          <tbody>
            <tr>{/* TODO: display data from query */}</tr>
          </tbody>
        </table>
      </header>
    </div>
  );
}

非常に簡単な瞬間には、読み込みメッセージを表示することがあります.

また、あなたが通過している場合interval 番目のプロパティとして、あなたは5秒毎に、反応アプリが自動的にWebページを更新することに気づくことがあります.この動作を停止するには、interval プロパティ.
JavaScriptの使用map 関数の配列をマップしましょうdata と内容を表示します.データが取り出されるなら、それは存在することを意味します、そして、我々は簡単に配列を地図化することができます.コメントの代わりに次のコードスニペットを追加します.

<tbody>
  {data &&
    data.map((item, index) => (
      <tr key={index}>
        <td>{item.title}</td>
        <td>{item.author}</td>
      </tr>
    ))}
</tbody>

ブラウザウィンドウに戻り、次のような結果が得られます.

クエリは、useHarperdb 唯一のフックdata 配列.データベースからアウトレットまたはレコードの合計数を取得するには、次のクエリを追加します.

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

合計カウントを表示するには、App コンポーネント

// ...
<h2>Starbucks Outlets</h2>
<p>Total Outlets: {data2 && data2[0].totalOutlets}</p>
// ...

次の出力は以下の通りです.

結論

フックは、反応の世界で素晴らしい追加され、彼らは確かに我々は以下のコードを書くのに役立ちます.このポストの目的は、あなたにuseHarperDB フックとどのようにクラウドでホストされているデータベースからデータを取得するために反応アプリに統合する方法.