💭

Nuxt 3のserver/apiでjsonファイルを操作する方法の一例

2022/10/16に公開

Nuxt

API

Nuxt 3

tech

Nuxt 3のserver/apiでjsonファイルを（インポートして）操作する方法の一例です。以下の記事を参考にしました。

型定義などの改善の余地は多々ありますが、以下のような書き方で動作確認ができました。

// async/await を使用しています。
export default defineEventHandler(async (event) => {
  const items_: any = await import('~/assets/index.json')
  // .defaultをつける点に注意
  const items_total: any[] = items_.default
  // 以下の参考リンクを参照してください。
  const query = getQuery(event) 
  const page: number = Number(query.page) || 1;
  const size: number = Number(query.size) || 20;
  const items: any[] = items_total.slice((page - 1) * size, page * size);
  return {
    "hits": {
      "total": {
        "value": items_total.length,
      },
      "hits": items
    }
  }
});

上記により、例えば/api/items?page=2&size=40のようなクエリを用いることで、インポート元のjsonファイル（~/assets/index.json）の一部を返却することができました。パスはassets以外でも大丈夫のようですが、十分に検証できていません。

色々と改善の余地があるかと思いますが、参考になりましたら幸いです。

参考

Discussion