feat(navigation): allow passing QueryBuilder or QueryBuilderParams in fetchNavigation or <ContentNavigation>

[harlan-zw]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The ContentNavigation component is typed to only allow you to provide the query as QueryBuilderParams. The DX of this isn't great as everywhere else in the doc a QueryBuilder is used with queryContent.

This is especially annoying when you want to show the ContentNavigation with a simple path prefix, as the user has to then figure out regex.

The fetchContentNavigation already supports a QueryBuilder, so it's seems like this was the initial expectation of this prop anyway.

I've added an example to highlight the use case

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt-content ready!

Name	Link
🔨 Latest commit	267e4b7
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-content/deploys/629a234ccdc87100098d6de6
😎 Deploy Preview	https://deploy-preview-1206--nuxt-content.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Atinux]

Beautiful ❤️

[Tahul]

I love it as well! :)

Thanks a lot @harlan-zw 😄

[Tahul]

Hey @harlan-zw :)

After a brief discussion with @farnabaz ; I remembered we had plans on supporting the same type of query format as <ContentQuery /> has.

I will still merge this PR after applying some changes as we want to support both:

<script setup>
const queryBuilder = queryContent().where({ ... })
</script>

<template>
   <ContentNavigation :query="queryBuilder" />
   <!-- OR (upcoming) -->
   <ContentNavigation :where="{ ... }" />
</template>

[Tahul]

Just added a test to cover your changes @harlan-zw, thank you again for this!

[harlan-zw]

Hey @harlan-zw :)

After a brief discussion with @farnabaz ; I remembered we had plans on supporting the same type of query format as <ContentQuery /> has.

I will still merge this PR after applying some changes as we want to support both:

<script setup>
const queryBuilder = queryContent().where({ ... })
</script>

<template>
   <ContentNavigation :query="queryBuilder" />
   <!-- OR (upcoming) -->
   <ContentNavigation :where="{ ... }" />
</template>

This would definitely be the ideal case, having all components with the same prop API for querying would be a great DX improvement.