Data Transformation in content.config.ts (v3)

[franklin-tina]

Is your feature request related to a problem? Please describe

Note

This feature request for v3

I currently repeat data transformation code in multiple places.
For example, on the home page, I fetch post data and transform it like so:

// Used in: index.vue, all-post.vue
const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').select('id', 'title', 'path', 'description', 'tags', 'createdAt', 'updatedAt').order('createdAt', 'DESC').limit(2).all(), {
  transform(data) {
    return data.map((post) => ({
      ...post,
      // some other transformations for tags, and other values etc
      createdAt: new Date(post.createdAt).toLocaleDateString(),
    }))
  },
})

I do the same transformation on the "All posts" page and possibly other pages. This repetition can make it harder to maintain, and have consistent data across the pages where one might use it.

Describe the solution you'd like

I would like to configure data transformations directly in the content.config.ts file, if possible. This would centralize the transformation logic, making future updates in one file only

Describe alternatives you've considered

An alternative is to keep the transformation logic in each place where data is fetched, what I currently do.

Additional context

I saw a reference to a defineContentPlugin, with a transform property in an example file in the docs. However, I couldn't find any implementation of it in the source code.
Does this exist? If yes, I suppose we can perform transformations in there too.

Thanks 💚,
cc @larbish

[franklin-tina]

Looking at this again, I think one could define a server plugin and do a transform in the content:file:afterParse hook. 🤔

[khawarizmus]

That content:file:afterParse hook is useful for executing code before storing the file to the DB. it would be good to also have a hook(s) that executes after we fetch the content from the DB.

Something like content:file:afterFetch and content:file:afterFind Similar to what Lucide offers

There needs to be a way to also enhance the type so if the transformation adds/remove a property or changes the type of a specific property typescript should have a way to infer that.

[farnabaz]

Content v3 offers before/after hooks in the parsing process for contents. Check out https://content.nuxt.com/docs/advanced/hooks

Something like content:file:afterFetch and content:file:afterFind Similar to what Lucide offers

I'm not a fan of fetch/find hooks. Not all users need those hooks and yet they will live in runtime for all users. A similar behavior can be simply simulated by creating a transformer function which can be passed to useAsyndData -> transform, or .then() of promise.