Official Query Library for Astro

[louiss0]

Body

Can we please get a library that works like a query builder for Content Collections? Developers need a library that allows them to declaratively filter, sort, and group limit fields in content collections.

Background & Motivation

Content Collections allows it's user to get lots of collections but it only gives you a callback function for querying. This idea is good but and developers have lots of flexibility but many times developers have to do other other things with the data they are querying and are forced to implement their own solutions for handling how the data is sorted.

What are the problems that this RFC sets out to solve?

The problem that is meant to be solved by this RFC is data querying and sorting.

Scenario One

Lets say the user wants to get a collection of blogs by a certain Author with and wants to see the current ones by that person. The code for that would look something like this.

import  { getCollection } from "astro"

 const res = await getCollection('blog', ({author})==> author=== "Kevin")

 res.sort(
	 (prevEntry,nextEntry)=> 
Date.parse(prevEntry.pubDate) - Date.parse(nextEntry.pubDate) 
	 )

If I wanted to then group it by the published Date I'd have to then I'd have to do this

import  { getCollection } from "astro"

 const res = await getCollection('blog', ({author})==> author=== "Kevin")

 res.sort(
	 (prevEntry,nextEntry)=> 
Date.parse(prevEntry.pubDate) - Date.parse(nextEntry.pubDate) 
	 )

let groupedData = res.reduce((carry, item)=>{
	const group = (carry[item.pubDate] || [])
	 group.push(item)
	 carry[item.pubDate]= group
	return carry 
},{})

The above examples require too much boilerplate code. The second example should have been written by using a Map but you get the point.

Scenario Two

Lets say that I have to be able to get the first five of something or skip some collections by 2. You'd have to write this.

const res = (await getCollection('blog',))
	.splice(5, -1) // Getting five items
	.filter((_, i)=> i % 2 === 0  ) // Skipping two 

Scenario Three

If I wanted to select some fields from a collection I would have to write.

const res = (await getCollection('blog',))
	.map((item)=> ["name", "title"].reduce((carry, field)=>{

	carry[field] = item[field]

	return carry; 

	},{})
	
	)

As you can see this is a lot of work and not so easy to figure out. The hardest part for me was the grouping. By creating an official library that abstracts away all of this developers can be more productive.

Goals

• Allow developers to query and format data from content collections without to much hassle.

Example

In this example use Collection is used behind the scenes

const {useFilter} from "@astrojs/filter"
const filteredItems = (await useFilter("blog"))
.skip(2)
.sort("pubDate")
.groupBy('name')

**For a more in depth example go to [Blog Example on Stackblitz](https://stackblitz.com/edit/withastro-astro-blog-with-ft-pt

[jasikpark]

I would suggest using a functional data processing library like https://github.com/remeda/remeda instead, I'm not sure this is necessary to include directly in content collections?

Is there a reason why the library I linked, or something more well-used like Lodash, wouldn't work?

[louiss0]

I would suggest using a functional data processing library like https://github.com/remeda/remeda instead, I'm not sure this is necessary to include directly in content collections?

Is there a reason why the library I linked, or something more well-used like Lodash, wouldn't work?

I was asking for an official library that works with it. The user can download the library as an integration. I understand now that Astro is dedicated to being a minimalistic framework. There are static site generators out there that come with a Query API. I think having one for Astro would help developers become more productive and get rid of lots of boilerplate code.

[jasikpark]

Sure, what's an SSG that you've enjoyed using that has a query api like you're describing? I'm curious!

[louiss0]

Sure, what's an SSG that you've enjoyed using that has a query api like you're describing? I'm curious!

Nuxt https://content.nuxtjs.org/guide/displaying/querying

[jasikpark]

interesting... https://content.nuxtjs.org/api/composables/query-content

[louiss0]

I should have done some research before writing that comment. Nuxt and lume are the ones that do what I'm talking about. Gatsby does querying but it uses GraphQL in a magic way. @jasikpark

[jasikpark]

https://lume.land/ huh 👀

[jasikpark]

https://lume.land/plugins/search/ cool

[louiss0]

https://lume.land/plugins/search/ cool

You seem to like the idea while I'm not an expert-level TS-user I'd do anything to make the types better. So If you are someone else is willing to do this I'd like to help.

[jasikpark]

I'm still not quite sure it makes sense to make this a built-in yet, I'd suggest running with a wrapper helper lib that you can wrap a collection in to query it with. Will be great to have https://github.com/tc39/proposal-iterator-helpers too :)