Homepage content: status: 404, message: "Model not found"

General
1

Getting {“status”:404,“message”:“Model not found”} when fetching builder content

Request URL
https://cdn.builder.io/api/v3/query/25b1a215ae9f430989a220ee58457f96/homepage?omit=meta.componentsUsed&apiKey=25b1a215ae9f430989a220ee58457f96&userAttributes.urlPath=%2F&userAttributes.host=localhost%3A3000&userAttributes.device=desktop&options.homepage.model="homepage"

Payload

  1. omit: meta.componentsUsed
  2. apiKey: 25b1a215ae9f430989a220ee58457f96
  3. userAttributes.urlPath: /
  4. userAttributes.host: localhost:3000
  5. userAttributes.device: desktop
  6. options.homepage.model: “homepage”

Builder content link
localhost.3000

Builder public api key
25b1a215ae9f430989a220ee58457f96

What are you trying to accomplish
Using a React component for my homepage that fetches the Builder.io content and renders it using the BuilderComponent .

Code stack you are integrating Builder with
React

Reproducible code example

import React, { useEffect, useState } from 'react'
import { BuilderComponent, builder } from "@builder.io/react"

builder.init( `25b1a215ae9f430989a220ee58457f96` )

export const HomeScreen = () => {
  const [ homepage, setHomepage ] = useState( null )

  useEffect( () => {
    builder
      .get( `homepage` )
      .toPromise()
      .then( ( homepageData ) => {
        console.warn( homepageData )
        setHomepage( homepageData )
      })
  }, [] )

  return (
    <div className="pb-20">
      {homepage && <BuilderComponent model="page" content={homepage} />}
    </div>
  )
}

export default HomeScreen
2

Hello @king2nd23,

Welcome to the Builder.io forum post.

It appears that there is an issue with the . I have noticed that your page model name is ‘homepage’, but the builder content has been defined with model=“page”. To resolve this issue, please update the BuilderComponent as shown below:

    <div className="pb-20">
      {homepage && <BuilderComponent model="homepage" content={homepage} />}
    </div>
3

Thank you manish-sharma, I created a new homepage model and changed the model attribute to “homepage”, that fixed my issue.

I do one more follow up question.

I want to test the new homepage implementation on a lower environment (dev). In my project I am using react router and I have the HomeScreen element as mentioned early set to the path “/”. I also have the builder page set to the path “/” but have not published it because I do not know if that will affect my current homepage.

const routes = [
  {
    path: `/`,
    element: <HomeScreen />

  }

My question is will the paths in my react codebase(router and HomeScreen component) need to match the path that is set in the builder page editor in order for the builder page to render as my homepage?

4

Hello @king2nd23,

You can create a catch-all route for other pages, like shown in the below example

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';
import { BuilderComponent, builder, useIsPreviewing } from '@builder.io/react';

import './index.css';

// Put your API key here
builder.init('YOUR_API_KEY');

function App() {
  const [allPages, setAllPages] = useState([]);

  useEffect(() => {
    async function getStaticProps() {
      const pages = await builder.getAll('page', {
        fields: 'data.url,name',
        options: { noTargeting: true },
      });
      setAllPages(pages);
    }
    getStaticProps();
  }, []);

  return (
    <BrowserRouter>
      <header>
        <div className="logo">MY SITE</div>
        <div className="links">
          <Link className="link" to="/">
            Home
          </Link>
          <Link className="link" to="/about">
            About
          </Link>
          {allPages.map(page => {
            return (
              <Link className="link" to={page.data.url}>
                {page.name}
              </Link>
            );
          })}
          <Link className="link" to="/404">
            404
          </Link>
        </div>
      </header>
      <div className="App">
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route render={({ location }) => <CatchAllRoute key={location.key} />} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default function CatchAllRoute() {
  const isPreviewingInBuilder = useIsPreviewing();
  const [notFound, setNotFound] = useState(false);
  const [content, setContent] = useState(null);

  // get the page content from Builder
  useEffect(() => {
    async function fetchContent() {
      const content = await builder
        .get('page', {
          url: window.location.pathname,
        })
        .promise();

      setContent(content);
      setNotFound(!content);
    }
    fetchContent();
  }, []);

  // if no page is found, return a 404 page
  if (notFound && !isPreviewingInBuilder) {
    return <NotFound />; // Your 404 content
  }

  // return the page when found
  return (
    <>
      {/* Render the Builder page */}
      <BuilderComponent model="page" content={content} />
    </>
  );
}

const Home = () => <h1>I am the homepage!</h1>;
const About = () => <h1>I am the about page!</h1>;
const NotFound = () => <h1>No page found for this URL, did you publish it?</h1>;

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);