Nuxt/Content 3.3.0 .where() syntax not allowing to declare filter as separate object with QueryBuilderWhere

[mklueh]

Hello,

In my blog I had an abstract PostList component allowing me to reuse it on multiple pages with different filters.

1. On the main page showing all blog posts
2. On the author page showing only author's posts
3. On the tag page showing only posts related to the tag

I did that by isolating the logic into a separate helper composable and passing the specific filter object in, depending on the usage

But now with the new syntax, the where clause requires three separate params, so you cannot encapsulate the filter into an object anymore like before

Will there be another approach in the future, and what was the reason behind ditching it in favor of the new one?

[yudin-s]

The clean workaround is to stop passing filters around as objects and pass around functions that apply filters to the query builder.

For example:

type PostQuery = ReturnType<typeof queryCollection>
type Filter = (query: PostQuery) => PostQuery

const byAuthor = (author: string): Filter => (query) =>
  query.where('author', '=', author)

const byTag = (tag: string): Filter => (query) =>
  query.where('tags', 'LIKE', `%${tag}%`)

export function applyFilters(query: PostQuery, filters: Filter[]) {
  return filters.reduce((q, filter) => filter(q), query)
}

Then your shared list code can stay generic:

let query = queryCollection(event, 'blog')
query = applyFilters(query, filters)
const posts = await query.order('date', 'DESC').all()

That keeps the abstraction you had before, but the reusable unit is now query transformation rather than where object. It also composes better when one page needs multiple conditions.