タイプの生成
前回はサンプルのコードとして完結させるために、Typescript で利用する Type を手作業で作成をしました。今回は、定義しているフィールドに関しての Type を生成します。
Sanity TypeGen の利用
Sanity CLI のツールを利用することで、Studio で定義しているスキーマの定義を利用して、TypeScript で利用する type の定義ファイルを生成することができます。
この手順は、すべて apps/studio のディレクトリで実行していきます。
まず、schema の設定となる JSON ファイルを生成します。
npx sanity@latest schema extract完了すると、JSON ファイルが作成されます。
このファイルを利用して type を定義しているファイルを作成しますが、ファイルを参照するのは今回は Next.js となるため、出力先を変更するために以下のファイルを追加します。
{
"path": "../web/src/**/*.{ts,tsx,js,jsx}",
"schema": "./schema.json",
"generates": "../web/src/sanity/types.ts"
}上記のファイルがあれば、 types.ts のファイルが Next.js の中に出力されるようになります。
準備が完了したので、以下のコマンドを実行します。
npx sanity@latest typegen generate上記のコマンドを実行すると、apps/web/src/sanity/types.ts というファイルが作成されます。
これにより、前回 apps/web/src/app/page.tsx のファイルで Event のインターフェイスを作成しましたが、sanityFetch が形を利用した形で返しているため不要になります。スキーマを追加すると以下のようにエラーが表示されるようになりました。
該当する Event の定義などを削除して、あらためて Visual Studio Code で event を確認すると以下のようにきちんと定義を参照できています。
Type を自動更新
スキーマを変更した際に自動的に上記の作業を実施できるように、以下の編集を進めます。
"scripts": {
// ...the rest of your scripts
"predev": "npm run typegen",
"prebuild": "npm run typegen",
"typegen": "sanity schema extract && sanity typegen generate"
// 👆 add these three lines
},これにより、 apps/studio の直下で以下のコマンドを実行すると、type が更新されます。
npm run typegenスキーマを更新した際には、この手続きで簡単に定義を更新することができます。
まとめ
今回は Sanity の機能を利用して、Studio で利用しているスキーマの定義から Next.js で利用する TypeScript の定義を作成しました。また、package.json に手順を追加することで、schema の変更があれば更新をするコマンドも追加しました。
ここまでのサンプルは、以下のリポジトリ/ブランチで参照できます。