#Content Collection Horror

1 messages · Page 1 of 1 (latest)

rugged halo
#

I'm trying to pass data to a jsx component from a content collection (as seen in the following snippet) --- ```let page_title = await getEntry(page.data.title)
let page_paragraphs = await getEntry(page.data.paragraphs)

const page_html = BlogPost(page_title as string,page_paragraphs as string[])``` and I am getting the following error 'Cannot read properties of undefined (reading 'collection')'

magic mistBOT
#

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

#

The error message you're seeing, 'Cannot read properties of undefined (reading 'collection')', suggests that the getEntry function is trying to access a property of an undefined object. This could be due to the page.data.title or page.data.paragraphs being undefined or not existing in the content collection.

The getEntry function in Astro is used to retrieve a single collection entry by collection name and either the entry id (for type: 'data' collections) or entry slug (for type: 'content' collections) source (https://docs.astro.build/en/reference/api-reference/#getentry).

Here's an example of how to use getEntry:

import { getEntry } from 'astro:content';
// Get `src/content/blog/enterprise.md`
const enterprisePost = await getEntry('blog', 'enterprise');
// Get `src/content/captains/picard.yaml`
const picardProfile = await getEntry('captains', 'picard');
// Get the profile referenced by `data.captain`
const enterpriseCaptainProfile = await getEntry(enterprisePost.data.captain);

In your case, you might want to check if page.data.title and page.data.paragraphs exist and are correctly defined in your content collection. If the error persists, it could be due to a bug or an issue with your Astro setup. You might want to check the Astro GitHub issues (https://github.com/withastro/astro/issues) for similar problems or create a new issue detailing your problem.

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

#

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

rugged halo
#

@magic mist Why is this not working "---
import BlogPost from '../../components/BlogPost';
import { getEntry } from "astro:content";
// 1. Get the slug from the incoming server request
const { slug } = Astro.params;
if (slug === undefined) {
throw new Error("Slug is required");
}
// 2. Query for the entry directly using the request slug
const entry = await getEntry("writing", slug);
// 3. Redirect if the entry does not exist
if (entry === undefined) {
return Astro.redirect("/404");
}
const page_html = BlogPost(entry.data.title,entry.data.paragraphs)

<html>
<head>
<title>{entry.data.title}</title>
</head>
<body>
{page_html}
</body>
</html>"

magic mistBOT
#

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

#

The code you've provided seems to be correct in terms of how you're using the getEntry function to retrieve a specific entry from the writing collection using the slug from the request parameters.

However, the issue might be with how you're using the BlogPost component. In Astro, components are invoked using an HTML-like syntax, not like a function call.

Here's how you might want to adjust your code:

---
import BlogPost from '../../components/BlogPost';
import { getEntry } from "astro:content";
// 1. Get the slug from the incoming server request
const { slug } = Astro.params;
if (slug === undefined) {
  throw new Error("Slug is required");
}
// 2. Query for the entry directly using the request slug
const entry = await getEntry("writing", slug);
// 3. Redirect if the entry does not exist
if (entry === undefined) {
  return Astro.redirect("/404");
}
---
<html>
<head>
  <title>{entry.data.title}</title>
</head>
<body>
  <BlogPost title={entry.data.title} paragraphs={entry.data.paragraphs} />
</body>
</html>

In this adjusted code, the BlogPost component is invoked as an HTML-like element, with title and paragraphs passed as props. Make sure your BlogPost component is set up to receive and handle these props correctly.

If you're still encountering issues, it might be helpful to check the Astro documentation (https://docs.astro.build/) or the Astro GitHub issues (https://github.com/withastro/astro/issues) for further assistance.

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