1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Vue3]Supabaseで作ったバックエンドを元にOpenAPIのドキュメントを出力しよう

Last updated at Posted at 2024-05-25

個人プロジェクトでバックエンドとしてSupabaseを使っている。
SupabaseだとUIをぽちぽちするだけでバックエンドが完成。とても便利だ。
フロントエンドに集中した開発ができる。

今回はSupabaseで設定したバックエンド情報を元にTanStack Queryのエンドポイントメソッドを自動生成してみようと思う。しかし、OpenAPIのドキュメントをいちいち書くのがめんどくさいのでSupabaseさんに生成してもらいたい。

OpenAPIドキュメント生成

公式ドキュメントやGoogleドキュメントで調べてみてもやり方が見つからず、、
ChatGPT先生に聞いてみた。

Supabaseは、自動生成されたAPIドキュメントを提供しています。これを取得するには、以下のURLにアクセスします。
https://YOUR_PROJECT_ID.supabase.co/rest/v1/?apikey=YOUR_ANON_KEY

これが出ていると言うことは、きっと公式ドキュメントのどこかに書いてそう。

YOUR_PROJECT_IDYOUR_ANON_KEYを探しに行く。
メニューからProject Settingsに入る。

スクリーンショット 2024-05-25 22.07.15.png

GeneralReference IDYOUR_PROJECT_IDに該当する。

スクリーンショット 2024-05-25 22.07.44.png

APIに入るとYOUR_ANON_KEYも確認できる。

スクリーンショット 2024-05-25 22.08.30.png

結果

ちゃんとしたものが返ってきた!内容見た限り問題なさそう。

スクリーンショット 2024-05-25 22.13.10.png

しかし、swaggerのバージョンが2.0のため、3.0に変換したい。

変換してくれるサイトがあったので使ってみた。
URLを入れると...

見慣れたSwagger UIの画面が出てきた!(エンドポイントのパラメータが表示されないのが少し気になる)
スクリーンショット 2024-05-25 22.28.08.png

あとはOrvalで自動生成するだけ。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?