Nuxt Content V2 で server/api で Query する方法

Published at: 2022/11/23


背景

Nuxt Content (V2) を使っているとき、例えば記事数をいろいろゴリゴリと集計したいときなど、 lodash を入れたくなる。 しかし、 lodash は重いので、これをクライアント側でも利用することになる useAsyncData としては実現したくない、という問題がある。 Nuxt 2 まではそれでもその useAsyncData の内部処理で動的に lodash を import するなどして対応していたが、 Nuxt 3 からは /api にて任意の処理を行えるようになったので、その中で処理を記述し、コンポーネント側では useFetch すると、いろいろ綺麗に実装ができる。

その場合、 /server/api の中の API 定義にて Nuxt Content のクエリを呼ばなければならないが、その方法が自明ではなかったのでそのメモ。

回答

queryServerContent という関数があるので、それが利用できる。

import { serverQueryContent } from '#content/server';

export default defineEventhandler(async (event) => {
  const posts = await serverQueryContent(event, 'posts').find()
  return postsを使って計算した結果オブジェクト
})

Tags: nuxt3nuxt-content-v2nuxt

Related Articles