Hello, I am attempting to recreate our app, but in react/typescript. I’m trying to have a dynamic blog app and recreating the following blog post but in react - Create a drag-and-drop editable blog with Next.js. I can get the section model to render, but not render specific blogs when I search it. When checking the console network tab, I can see if querying the data model, and retrieving the data, but it is the wrong slug. The environment is a separate one than this to start fresh but here is the link: Builder.io: Visual Development Platform
Here is the code as well
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { BuilderComponent, builder, useIsPreviewing } from '@builder.io/react';
import axios from 'axios';
import styles from './blog.module.css';
builder.init(*removed for privacy*);
interface ArticleData {
data: any; // Replace with the specific type based on your data structure
}
interface ArticleTemplate {
data: any; // Replace with the specific type based on your template data structure
}
export function Blog() {
const { slug } = useParams<{ slug: string }>();
const isPreviewingInBuilder = useIsPreviewing();
const [notFound, setNotFound] = useState(false);
const [articleData, setArticleData] = useState<ArticleData | null>(null);
const [articleTemplate, setArticleTemplate] = useState<ArticleTemplate | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchContent() {
try {
const articleResponse = await builder
.get('article', {
options: { includeRefs: true },
query: {
'data.slug': slug,
},
})
.toPromise();
console.log(articleResponse)
const templateResponse = await builder
.get('blog-template', {
options: { enrich: true },
})
.toPromise();
if (articleResponse && templateResponse) {
setArticleData(articleResponse);
setArticleTemplate(templateResponse);
} else {
setNotFound(true);
}
} catch (error) {
console.error('Error fetching data:', error);
setNotFound(true);
} finally {
setLoading(false);
}
}
fetchContent();
}, [slug]);
if (loading) {
return <h1>Loading...</h1>;
}
if (notFound && !isPreviewingInBuilder) {
return <div>Not Found 404 Error</div>;
}
return (
<div className={styles.container}>
<meta name="viewport" content="width=device-width, initial-scale=1" />
{!articleData && <meta name="robots" content="noindex" />}
{articleData && articleTemplate && (
<BuilderComponent
model="blog-template"
content={articleTemplate}
data={{ article: articleData.data }}
/>
)}
</div>
);
};
The app routes are as follows:
<Routes>
<Route path="/" element={<HomePage />}></Route>
<Route path="/builder" element={<CatchAllRoute />}></Route>
<Route path="/builder/*" element={<CatchAllRoute />}></Route>
<Route path="/blog/" element={<Blog />}></Route>
<Route path="/blog/*" element={<Blog />}></Route>
</Routes>
I do have dynamic rendering for the initial builder path, but not the blog path