PocketBase y React y TypeScript

PocketBase 良き

趣味コードでの利用です。
しばらくコード書きから離れてたのですが、TypeScriptが良さげだったので再び弄り始めました。

PocketBaseの概要と初期設定については、@bear_montblanc
(Be4rR) さんの投稿が参考になります。

覚えたてのTypeScriptからのReactで

BaaSなので、フロントエンドだけ良いんじゃないか？ということで、触りたてのTypeScriptとReactでデータを取得し表示するとこまでを試してみました。

TypeScriptなので、とりあえず先に useStateで型を決めておくんだなとか、データを非同期で取る場合には useEffect 使うんだなとか、お勉強になりました。

ログイン処理や他の処理もまた投稿してみようかと思います。
React初心者なので、Reactの流儀が良くわかりませんが、こんな感じでしょうかね？

import React, { useState, useEffect } from "react";
import PocketBase, { RecordModel } from "pocketbase";

function App() {
  return (
    <>
      <div>
        <h1>from App.ts</h1>
      </div>
      <div>
        <Products />
      </div>
    </>
  );
}

export default App;

interface Product extends RecordModel {
  name: string;
  price: number;
}

const Products: React.FC = () => {
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const pb = new PocketBase("http://127.0.0.1:8090");
      try {
        const records = await pb.collection("products").getFullList<Product>();
        setProducts(records);
      } catch (error) {
        console.log(error);
      }
    };
    fetchProducts();
  }, []);

  return (
    <ul>
      {products.map((product: Product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
};