sos24-client

雙峰祭オンラインシステムのクライアントです。

環境構築

環境変数

.env.exampleを参考にFirebase・バックエンドURLを設定します。

セットアップ

npm iで依存関係がインストールされます。

npm run devで開発用サーバが起動します。

ビルド

npm run buildでビルドできます

Cloudflare Pagesにデプロイする場合はnpx @cloudflare/next-on-pages@1で静的アセットを生成できます。

APIからのresponseにスキーマに応じた型を付ける方法

SWRを使ってGETするとき編

import { assignType } from "@/lib/openapi";

const newsId = "<uuid>";

const { data: newsRes, error: newsErr, isLoading } = useSWR(`/news/${newsId}`);
if (isLoading) {
  // 読み込み時の処理
}
if (newsErr) {
  // エラー時の処理
}
const news = assignType("/news/{news_id}", newsRes);

path parametersはurlに文字列として直接埋め込みます。

assignTypeには、openapiで定義されているパスとnewsResを渡します。

APIを安全に叩く方法(post、putなど)

openapi-fetchを使います。

ベータについて

GitHub Actionsを手動実行することでベータをデプロイできます。

スキーマの更新

schema.ymlを更新したのち、以下のコマンドを実行してください

npm run gen
npm run format

現在はopenapi-typescriptのバグ（ openapi-ts/openapi-typescript#1464 ）により、正しい型定義が生成されません。そのため、以下のコマンドを実行して型定義を修正してください。

sed -i '/type: "FormItem";/d' ./src/schema.d.ts
sed -i '/type: "NewFormItem";/d' ./src/schema.d.ts
sed -i 's/Omit<components\["schemas"\]\["FormItemKind"\], "type">/components["schemas"]["FormItemKind"]/' ./src/schema.d.ts