src/components/Card/OverviewCard.astro

@@ -4,8 +4,7 @@ import TagRow from "./TagRow.astro"
 
 const { recipe } = Astro.props;
 
-const headerImage = await client.collection("images").getOne(recipe.images[0])
+const image = (await client.getRecipeImages(recipe.id))[0]
-const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">
@@ -19,7 +18,7 @@ const image = await client.files.getRelativeURL(headerImage, headerImage.image)
         <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
         <div id="tag-row" class="">
-            <TagRow tagIds={recipe.tags}/>
+            <TagRow tags={recipe.expand.tags}/>
         </div>
     </div>
 

src/components/Card/TagRow.astro

@@ -1,17 +1,10 @@
 ---
-import client from "../../data/pocketbase"
-
-interface Props {
-    tags: string[]
-}
-
 const { tags } = Astro.props
-
 ---
 
 <div class="">
     {
-        tags.map(tag => (
+        (tags ?? []).map(tag => (
             <a 
                 href={`/tag/${tag.id}`}
                 class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 

src/data/pocketbase.ts

@@ -31,7 +31,7 @@ class APIClient {
     }
 
     async getAllRecipes() {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ expand: "steps,ingredients,tags" })
+        return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
     }
 
     async getRecipe(id: string) {

src/pages/index.astro

@@ -3,7 +3,7 @@ import PageLayout from "@/layouts/base"
 import client from "@/data/pocketbase"
 import OverviewCard from "@/components/Card/OverviewCard"
 
-const recipies = await client.collection("recipes").getFullList()
+const recipes = await client.getAllRecipes()
 ---
 
 <PageLayout>	
@@ -11,7 +11,7 @@ const recipies = await client.collection("recipes").getFullList()
 
 	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
 		{
-			recipies.map(r => (
+			recipes.map(r => (
 				<OverviewCard recipe={r} />
 			))
 		}