はじめに

いろいろ試してわかったことを備忘的に残します

まだまだわからないことがたくさんあるので耳寄り情報などコメントで教えてくれると助かります。。。

GET

クエリパラメーターの使い方とパスパラメーターの使い方
クエリパラメータはメソッド用意されてるけど、パスパラメータは用意されていないっぽい
（知らないだけかも）

リクエスト

<script setup>
    // const {data, pending, error, refresh} = await useFetch("/api/test/{id}")
    const {data, pending, error, refresh} = await useFetch("/api/test/0", {
        method: "GET",
        params: { month: 8 }
    })
</script>

server/api/test/[id].get.ts

export default defineEventHandler(async (e) => {

    // パスパラメータの取得
    const id = e.context.params.id
    console.log(id)
    // → ｏｕｔｐｕｔ: 0

    // クエリパラメータの取得
    const query = useQuery(e)
    console.log(query)
    // → output: { month: 8 }

    return {
        message: `GET request`
    }
})

POST

bodyはクエリパラメーター同様メソッドが用意されてます
注意点としてはuseBody()を使うときはawait修飾子を付ける必要があります
→ Promiseが返るため

リクエスト

<script setup>
    // const {data, pending, error, refresh} = await useFetch("/api/test/{id}")
    const {data, pending, error, refresh} = await useFetch("/api/test/0", {
        method: 'POST',
        body: { country: "Japan", isJapanese: true }
    })
</script>

server/api/test/[id].post.ts

export default defineEventHandler(async (e) => {

    // パスパラメータの取得
    const id = e.context.params.id
    console.log(id)
    // → ｏｕｔｐｕｔ: 0

    // クエリパラメータの取得
    const body = await useBody(e)
    console.log(body)
    // → ｏｕｔｐｕｔ: { country: "Japan", isJapanese: true }

    return {
        message: `POST request`
    }
})

ファイル名のあれこれ

server/api/hello.tsというファイルがあったとしたら、/api/helloに対してどんなHTTPメソッドでリクエストしても引っかかってくれる
明示的にHTTPメソッドを指定したい場合はファイル名に.getなどメソッド名をつければOK

GET
server/api/hello.get.ts
POST
server/api/hello.post.ts

試してないけどDELETEやPUT、PATCHでも大丈夫

パスパラメータを使いたい場合は下記のように角括弧（[]）で囲ってあげればいい

GET
server/api/[id].get.ts
POST
server/api/[id].post.ts

API側での取得方法は上のほうのサンプルで書いてあるので、そちら参照