【React】ReactでAlgoliaを使用する

React（Next.js）でAlgoliaを使用する方法です。

Algoliaのドキュメントを参考にしています。

ライブラリのインストール

下記コマンドでAlgoliaをライブラリをインストールします。

npm install algoliasearch

インデックスの作成

Algoliaのインデックスを作成します。

AlgoliaのダッシュボードからSearch > Create Index > インデックス名を入力してCreateを押下すれば作成できます。

ソースコード

ソースコードは下記になります。

Application ID、YourWriteAPIKey はAlgoliaのダッシュボードからSettings > API Keysで自分のAPI Keyで置き換えてください。

import { useForm } from 'react-hook-form';

const User = () => {
  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm();

  const algoliasearch = require('algoliasearch');

  const client = algoliasearch('Application ID', 'YourWriteAPIKey');

  const index = client.initIndex('users');

  const onSubmit = async (data) => {
    index.saveObject({...data, objectID: data.id}).wait();
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          type="text"
          {...register('id', {})}
        />
        <input
          type="text"
          {...register('name', {})}
        />
        <input type="submit" value="送信" />
        <br />
        <input
          type="button"
          value="検索"
          onClick={async () => {
            index.search(getValues('name')).then(({ hits }) => {
              console.log(hits);
            });
          }}
        />
      </form>
    </>
  );

}

export default User;

オブジェクトの保存

「送信」ボタンを押すとAlgoliaにオブジェクトが保存されます。

index.saveObjectにオブジェクトを渡すとAlgoliaにオブジェクトの追加・変更ができます。

objectIDが必須となるため、フォームに入力されたidをobjectIDに設定しています。

オブジェクトの検索

「検索」ボタンを押すとフォームに入力された文字列でオブジェクトを検索します。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村