How to use queryCollection with nested values?

[Chippd]

I'm upgrading my app to v3, and so migrating from queryContent to queryCollection, but struggling to see how I filter/sort by nested values on my the documents.

In v2, I could do the following

Note the where() and sort()

const { data } = await useAsyncData(
  `blog-posts-${locale.value}`,
  () => queryContent('/blog')
    .locale(locale.value)
    .where({ published: true }) // Note this
    .sort({ postNumber: -1, $numeric: true }) // Note this
    .only(['title', 'description', 'date', 'img', 'slug', 'postNumber'])
    .find(),
  {
    // Cache for 1 hour (in milliseconds)
    maxAge: 3600000,
    // Only refresh when locale changes
    watch: [locale]
  }
)

Since upgrading to v3, I've changed my query to:

const { data: featuredPosts } = await useAsyncData('home', () =>
  queryCollection('content')
    .select('title', 'description', 'meta')
    where('path', 'like', `/${locale.value}/blog%`)
    // .where('meta.published', '=', true) // This doesn't work
    // .order('meta.postNumber', 'desc') // This doesn't work
    .limit(3)
    .all(),
  { server: true }
)

Which brings in an object like so:

{
    "title": "Your digital footprint is important - here's how we help protect it.",
    "description": "We take your privacy seriously. That's why we delete your images after 30 days of inactivity.",
    "meta": {
        "img": "/AAA-hairstyle_images/homepage/blog/DALL_E%202023-12-22%2021.30.16%20-%20A%20warm%20and%20inviting%20image%20for%20a%20blog%20post,%20illustrating%20aihairstyles'%20dedication%20to%20protecting%20user%20privacy.%20The%20image%20should%20depict%20a%20symbolic%20shield.png",
        "date": "22nd Dec 2023",
        "featured": true,
        "postNumber": 3,
        "published": true,
        "slug": "aihairstyles-privacy"
    }
}

My problem is the commented out lines - they do not work. I need to be able to filter/sort based on values in the meta property.

Any help is much appreciated.

[Chippd]

Made some progress by referencing this thread.

Updating my content.config.ts with the below meant that the values are not in the meta but at the top level, allowing them to be accessed in the query

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
      schema: z.object({
        title: z.string(),
        description: z.string(),
        date: z.string(),
        published: z.string(),
        postNumber: z.number(),
        slug: z.string(),
        img: z.string()
      })
    })
  }
})

[TribeWeb]

I also have this problem. Can't access nested values in the sort query. Don't really want to have change the underlying data structure

[mklueh]

I'm also trying to use my custom slug instead of the file name, to avoid breaking things when refactoring.

const { data, error } = await useAsyncData("review", () => {
  const result = queryCollection("review")
    .where("meta.slug", "=", params.slug) //not working
    .first();

  if (!result) throw createError({ statusCode: 404, statusMessage: "Review not found" });

  return result;
});

However querying by meta.slug does not work.

Would appreaciate any tips, stuck here because I don't want to break all backlinks

[bernhardberger]

I'm struggling with the same question - I can't access nested values.

Is it a requirement to have a flat structure in v3?

[frantortosa]

Same issue here, also documentation does not help.

[spyesx]

@Chippd where did you find % used in where('path', 'like', /${locale.value}/blog%) ?

I am also working on nested content. Thanks to you and this % a piece of my query works but I'm missing a lot. Any pointer for an alternate documentation?

Edit: Or is it SQL syntax?

[Chippd]

@spyesx I can't quite recall but searching the docs I found where I must have got it from - in the migration guide: https://content.nuxt.com/docs/getting-started/migration#converting-querycontent-to-querycollections

It's probably SQL syntax but I'm not sure tbh

[spyesx]

Thx for the message. Yes, it looks like SQL syntax.

According to your pointer:

queryCollection is building a query for an SQL database.

In that case, the % wildcard represents any number of characters, including zero character.

For those reading this comment and looking for a quick tip:

AB%  # starts with AB
%AB  # ends with AB
%AB% # contains AB
A_C  # a single character between A and C
A[BCDZ] # starts with A followed by any letter in the array
A[^BCDZ] # starts with A followed by any letter that is NOT in the array