Is it possible to type the 'data' property on collections?

[outer slate]

const blogCollection = defineCollection({
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      heroImage: image().refine((img) => img.width >= 1200, {
        message: "Hero image must be at least 1200px wide",
      }),
      heroImageAlt: z.string(),
      publishDate: z.string().transform((str: string) => new Date(str)),
      updateDate: z.string().transform((str: string) => new Date(str)),
      slug: z.string(),
    }),
});

export const collection = {
  blog: blogCollection
};

In this example, we have a blog content collection with a few defined fields for the frontmatter mdx files.

Within a .astro file I import the collection like so:

const blogPosts = await getCollection('blog');

Which returns the type of:

const blogPosts: ({
    id: "choosing-a-standing-desk.mdx";
    slug: "choosing-a-standing-desk";
    body: string;
    collection: "blog";
    data: any;
} & {
    render(): Promise<{
        Content: AstroComponentFactory;
        headings: MarkdownHeading[];
        remarkPluginFrontmatter: Record<...>;
    }>;
})[]

data here does not have the type information defined in the config.

[oak herald]

Hi @outer slate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro uses Zod (https://github.com/colinhacks/zod) to power its content schemas. With Zod, Astro is able to validate every file’s frontmatter within a collection and provide automatic TypeScript types when you go to query content from inside your project. However, based on the information provided, it seems like there might be an issue with the type inference for the data field in your collection.

In the GitHub issue (https://github.com/withastro/astro/issues/5965) you mentioned, a user reported a similar problem where the data field was of type any. This issue was closed, but it seems like you might be experiencing a similar problem.

In another GitHub issue (https://github.com/withastro/astro/issues/8999), a user reported that the getCollection types are incorrect and return undefined. This issue is still open, indicating that there might be ongoing problems with Astro's type inference for collections.

To get the most out of your content collections, you should define your collections in a src/content/config.ts file in your project. This is a special file that Astro will automatically load and use to configure your content collections. If you do not already extend Astro’s strict or strictest recommended TypeScript settings in your tsconfig.json file, you may need to update your tsconfig.json to enable strictNullChecks and allowJs (source (https://docs.astro.build/en/guides/content-collections/)).

If you continue to experience issues with type inference in your collections, I recommend following the progress of the open GitHub issue or opening a new issue to report your specific problem.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@outer slate kapa.ai is still learning and improving, please let us know how it did by reacting below

[outer slate]

@oak herald

referencing this example:

---
import { getCollection } from 'astro:content';
const blogEntries = await getCollection('blog');
---
<ul>
  {blogEntries.map(blogPostEntry => (
    <li>
      <a href={`/my-blog-url/${blogPostEntry.slug}`}>{blogPostEntry.data.title}</a>
      <time datetime={blogPostEntry.data.publishedDate.toISOString()}>
        {blogPostEntry.data.publishedDate.toDateString()}
      </time>
    </li>
  ))}
</ul>

from: https://docs.astro.build/en/guides/content-collections/#using-content-in-astro-templates

is the data object expected to have type information? My data object is any

[oak herald]

Let me check the knowledge base for you. One moment! :books:

---

Yes, the data object is expected to have type information. The data object contains the frontmatter properties inferred from your collection schema. If no schema is configured, it defaults to any (source (https://docs.astro.build/en/reference/api-reference/)).

In your config.ts file, you should define a schema for your collection using the defineCollection function. This schema enforces consistent frontmatter or entry data within a collection and guarantees that this data exists in a predictable form when you need to reference or query it. When you define a schema for your collection, Astro will automatically generate and apply a TypeScript interface to it (source (https://docs.astro.build/en/guides/content-collections/)).

Here's an example of how to define a schema for a blog collection:

import { z, defineCollection } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    publishedDate: z.date(),
    // other properties...
  }),
});

export const collections = {
  blog: blogCollection,
};

In this example, the data object for each blog entry would have a title property of type string and a publishedDate property of type Date.

If you're still seeing any for the data object, it could be due to a misconfiguration in your schema or a bug in Astro. If you've defined your schema correctly and are still experiencing this issue, I recommend opening an issue on the Astro GitHub repository (https://github.com/withastro/astro/issues).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: