How do you query z.array() fields (e.g. tags) in the latest nuxt-content module (v3.alpha.8)

[humblemodulo]

In the previous version of nuxt-content (v2) I would simply query tags like so:

  .where({ tags: { $contains: tagSlug } })

However there is no contains in v3, and the logic for IN seems to require the reverse operation. I've tried LIKE and that doesn't work either.

Definitely need to know the best way to find values in z.array() field types.

As it stands, I'm forced to retrieve all, then run JS .filter() on the results. Quite inefficient.

[aatrooox]

I have a similar need for filtering tags

like this:

let query = queryCollection('content').where('tags', 'LIKE', `%${tag}%`)

if filter multiple：

let query = queryCollection('content')
  if (filter_tags.length) {
    filter_tags.forEach(tag => {
      query = query.where('tags', 'LIKE', `%${tag}%`)
    })
  }

query.order('date', 'DESC').all()

Because I found that the 'tags' field in the SQLite database is merely of type Text.

so, it can only be filtered using LIKE...

if you have a better way, please tell me 😀

[matteioo]

While the solution @aatrooox is probably already the best you can get regarding the runtime (correct me if I'm wrong) but I thought I'd share my solution with you, since the solution above works for logical AND concatenation of the tags but wouldn't work when wanting to concatenate the tags using logical OR.

Luckily, there are andWhere as well as orWhere which allow us to concatenate additional statements as the name implies logically AND or OR.

As an example, with the following code you can filter the content collection which match all the provided tags.

const fetchContent = async () => {
  const query = queryCollection('content')
  if (filter_tags.length) {
    query.andWhere(q => {
      filter_tags.forEach(tag => q.where('tags', 'LIKE', `%${tag}%`))
      return q;
    })
  }
  return await query.all()
}

By using either andWhere or orWhere you can choose which logical concatenation of the tag statements you would like to use. And at least I myself would state that the code is readable for outsiders, as it is near to SQL syntax. Furthermore, it is easy to adapt and extend with more nested statements (both AND and OR) to fine-tune the query.

Hope this helps anyone in the future who visits this thread 👍

[NelsonBN]

It would be important to have the CONTAINS operator to be able to do an exact match with one of the tags. The LIKE operator ends up being a workaround, but it fails if we want to do an exact match and the tag we're searching for is part of another tag, because we're using the wildcard %.

For example:

---
title: Post 1
tags: ['Java','OOP']
---

---
title: Post 2
tags: ['JavaScript','OOP']
---

query = queryCollection('blog').where('tags', 'LIKE', '%Java%');

In this case, it will return both posts, when we only wanted "Post 1".

[sajjadbarcha]

this is very important issues and we need it ASAP, I am working on a website where we have 1000's of blogs and want to filter based categories and tags, but due to limitations of current Operators I have to fetch all blogs on initial load and filter them in Client side.

[mmgolden]

Any update on this? I need to have CONTAINS as well.

[aatrooox]

Per the latest Nuxt Content documentation, the where clause now supports the IN operator.

I haven’t personally verified this yet — looking forward to hearing your findings. 🤩

[matteioo]

According to the git blame of the docs page, the IN operator exists already in the docs for approx. 8 (?) months or did you find something else in some preview branch? I don't know the details why but afaik the IN operator was unfortunately no solution to the issue. Nonetheless, would be nice if you could somehow share your findings for a working demo with the IN operator and maybe I've just done it wrong some time ago (unfortunately I was not able to do it but can't remember what exactly was the issue).

[mmgolden]

My frontmatter looks like this:

---
tags:
  - tutorial
---

This is how I'm currently solving it using LIKE:

const { data: posts } = await useAsyncData(`blog-${tag.value}`, () => {
  return queryCollection("content")
    .where("tags", "LIKE", `%"${tag.value}"%`)
    .order("date", "DESC")
    .all();
});

[codebykyle]

That's a better method for solving this that the one posted above because its wrapped in quotes. That will solve the partial-match issue since, in the database, its stored as a JSON serialized array of strings, which are wrapped in quotes. Thanks for that snippet!