😽

Nuxt.jsでWebアプリケーション開発メモ20

に公開
Django
DRF
Nuxt 3
Claude
5hourlimit
tech

概要

Djangoのapi/schemaからフロントエンドで使用する型定義を自動生成する。
api/schemaは以下で使えるようにしたやつ。
https://zenn.dev/yduts_eruc/articles/ef33f72a058dd6

プロンプト20

# 命令20
## 命令20-1
- djangoのapi/schemaから型定義を自動生成できるようにするカスタムスクリプトを追加してください。

追加命令

  • Djangoのapi/schemaがエラーになり出したので、原因調査と修正。

対応内容

  • 設定から型定義生成まで自動でやらせようと思ったらなんかやたらエラー出してるのでCtrl+Cで中断。
  • 手動手順を提示させて手動対応。
    • pnpm install -D openapi-typescript
    • package.jsonに"generate-types": "openapi-typescript http://localhost:8000/api/schema/ --output types/api.d.ts"を追加。
    • pnpm run generate-typesを実行。
  • 一部APIレスポンスの型定義がneverになっていたので原因調査させる。
    • Django側のメソッドが関数ベースビュー (@api_view)の場合、@extend_schemaが必要とのことで修正させた。
    • Django REST Framework の標準ジェネリックビューの場合は、@extend_schemaは不要とのこと。
  • トレーニング記録取得APIによるデータ取得処理を型安全に修正。
  • Django側でapi/schemaがエラーになるのでエンコーディング設定を追加。

ソース差分

バックエンド

https://github.com/tkure/prototype-backend/commit/db3f52f6c58221fa78a10a3929b82dcd522e372b

フロントエンド

https://github.com/tkure/prototype-frontend/commit/ea2eb07c95e90a7fd6d1c4d20570130542b7bf3e

→ Nuxt.jsでWebアプリケーション開発メモ21

Discussion