nuxt3のServerRouteのあれこれ（備忘）

はじめに

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

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

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>

• API

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>

• API

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側での取得方法は上のほうのサンプルで書いてあるので、そちら参照