I have Strapi and website in one repo (monorepo)
Is there a way to use strapi-generated types in Astro project to have up-to-date types?
#Typesafe Strapi typing
deep raven
vivid dawnBOT
Hi @deep raven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro does not directly support using Strapi-generated types. However, you can manually create TypeScript interfaces in Astro that correspond to your Strapi content types. For example, you can create an Article interface that corresponds to the Article content type in Strapi:
export default interface Article {
id: number;
attributes: {
title: string;
description: string;
content: string;
slug: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
};
}
This interface should be created at src/interfaces/article.ts in your Astro project (source (https://docs.astro.build/en/guides/cms/strapi/#optional-creating-the-article-interface)).
You can then use this interface in your Astro components to provide type safety and autocompletion. For example, you can use it in an Astro layout like this:
---
interface Props {
title: string;
description: string;
publishDate: string;
viewCount: number;
}
const { title, description, publishDate, viewCount } = Astro.props;
---
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content={description}>
<title>{title}</title>
</head>
<body>
<header>
<p>Published on {publishDate}</p>
<p>Viewed by {viewCount} folks</p>
</header>
<main>
<slot />
</main>
</body>
</html>
(source (https://docs.astro.build/en/basics/layouts/#using-typescript-with-layouts))
Please note that you will need to manually update these interfaces whenever your Strapi content types change. Astro does not currently support automatically syncing these types.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
deep raven
@vivid dawn Can I use Strapi with Astro using it's collection?
vivid dawnBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you can use Strapi with Astro and leverage its collections. You can fetch your list of articles (or any other collection) from Strapi and generate pages for each item in the collection.
Astro provides a getStaticPaths() function that you can use to fetch your list of articles from Strapi in Astro’s default static mode (SSG). Here's an example:
---
import fetchApi from '../../lib/strapi';
import type Article from '../../interfaces/article';
export async function getStaticPaths() {
const articles = await fetchApi<Article[]>({
endpoint: 'articles',
wrappedByKey: 'data',
});
return articles.map((article) => ({
params: { slug: article.attributes.slug },
props: article,
}));
}
type Props = Article;
const article = Astro.props;
---
(source (https://docs.astro.build/en/guides/cms/strapi/#static-site-generation))
In this example, fetchApi is a function that fetches data from Strapi, and Article is a TypeScript interface that corresponds to the Article content type in Strapi. The getStaticPaths() function fetches the list of articles from Strapi and returns an array of objects, each containing the slug and props for an article. Astro then generates a page for each article using these slug and props.