// lib/db/food.ts
import { cache } from "react"

export const getFoods = cache(() => {
  const foods = await db.query.foods.findMany({
    with: {
      recipe: true
    }
  })

  return foods
})

// getFoods() returns an array like this
[
  {
    id: 1,
    name: "Taco",
    recipe: {
      id: 1,
      ingrediants: [...],
      steps: [...],
    },
  },
]

// app/food/page.tsx

// We can just query everything at the food page.tsx and pass data down using props
// No sequential or even parallel fetching

export default async function FoodPage() {
  const foods = await getFoods()

  return <FoodList foods={foods} />
}

// components/food.tsx

export function FoodList({foods}) {
  return foods.map((food) => <FoodItem food={food} /> )
}

function FoodItem({food}) {
  return (
    <div>
      <span>{food.name}</span>
      { /* Some component that renders recipe and so on... */ }
      <Recipe recipe={food.recipe} />
    </div>
  )
}

const recipes = []

for (const food of foods) {
  const recipe = await getRecipe(food.id)
  recipes.push(recipe)
}