ChiselStrike 0.15のリリースを発表できることを嬉しく思います。これにより、 Web アプリケーションや Node.js プログラムで使用できるTypeScript クライアント API が開発者に提供されます。私たちは常に、データ モデルから派生して自動的に生成された REST API を使用していましたが、このクライアントにより、特にシングル ページ アプリでの作業がはるかに簡単になりました。これは、Web アプリケーションでクエリを管理しパフォーマンスを向上させるための一般的なツールであるTanStack Queryと連携するように特別に設計されました。

メリットは何ですか?

ChiselStrike 上に構築されたアプリケーションは通常、そのデータ モデルを記述するために 1 つ以上のエンティティを宣言します。modelsエンティティは、次のように特別なソース ディレクトリに追加された単純な TypeScript クラスです。

import { ChiselEntity } from "@chiselstrike/api"

export class BlogPost extends ChiselEntity {
    author: string = "Anonymous"
    content: string
    publishedAt: number
    hidden: boolean
}

import { BlogPost } from "../models/BlogPost"

export default BlogPost.crud()

使い方

クライアント コードが BlogPost エンティティに適切なタイプを持つようにするには、上記のエンティティ クラスに基づいてカスタム コードを生成する必要があります。ChiselStrike CLI でこれを実行できるようになりました。まず、ローカル開発サーバーがシェルで実行されている必要があります。

$ npm run dev

$ npm exec chisel generate [path/to/dir]

export type BlogPost = {
    id: string;
    author: string;
    content: string;
    publishedAt: number;
    hidden: boolean;
};

export function createChiselClient(config: ClientConfig)

それの使い方

React アプリがあり、そのsrc/chiselディレクトリに上記のファイルを生成したとします。client.tsこれで、 と をインポートしmodels.ts、ローカル開発サーバーに対して使用を開始できるようになりました。すべての BlogPost インスタンスをクエリして配列に入れる場合は、次のようになります。

import { Message } from "./chisel/models"
import { createChiselClient } from "./chisel/client"

const chiselClient = createChiselClient({
    serverUrl: "http://localhost:8080"
})

const posts: BlogPost[] = await chiselClient.posts.getAll()

もちろん、 への呼び出しはgetAllフック内にある必要があり、それを JSX テンプレートで使用してコンポーネントを設定します。

TanStack クエリとの連携方法

TanStack Query をまだ使用していない場合は、使用する必要があります。データベース クエリを簡単かつ効率的に行うための多くの重労働を処理します。ChiselStrike クライアント API はこれとうまく連携します。TanStack と ChiselStrike の両方を最小限の方法で使用した React コンポーネントは次のようになります。

function usePosts() {
  return useQuery(["posts"], () => {
     // Here we use the ChiselStrike API in the TanStack Query function
     return chiselClient.messages.getAll()
  })
}

function PostsComponent() {
  const { data, status, isLoading, error } = usePosts()
  if (isLoading) return <div>Loading</div>

  // data is now an array of BlogPost, or undefined
  return (
    <div>
      { data?.map(post => (
        <div key={ post.id }>
          <div>{ post.author }</div>
          <div>{ post.content }</div>
        <div/>
      ))}
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <PostsComponent/>
      </QueryClientProvider>
    </div>
  )
}

その他知っておくべきこと

クライアント API は、ChiselStrike でサポートされているさまざまな HTTP メソッドを完全にサポートしており、それらをすべて使いやすい API にまとめています。また、モデル内で確立されたエンティティ関係も理解します。

API は内部で標準の Web フェッチ API を使用して HTTP リクエストを実行します。これは、生成された TypeScript が、フェッチ API が利用可能な Node.js 環境でも動作することを意味します。これは、ノード 18 を使用してサイトを事前レンダリングする場合に、まったく同じクライアント コードを使用して、レンダリングするコンテンツのクエリを実行できるため、非常に便利です。

包括的なドキュメントとサンプル コードについては、クライアント API ドキュメントを参照してください。ChiselStrike を使用して何かを構築した場合は、 DiscordまたはTwitterでお知らせください。楽しい彫刻を！