Navlink Blueprint - Remix example doesn't work

Technical Questions
1

What are you trying to accomplish
I’m trying to follow the Navigation Links Blueprint example for remix but it doesn’t work

My code (which I already slightly adjusted from the example) is:

export const loader: LoaderFunction = async ({ params }) => {
  // Get the CMS data from Builder
  const links = await builder.getAll('nav-links', {
    // You can use options for queries, sorting, and targeting here
    // https://github.com/BuilderIO/builder/blob/main/packages/core/docs/interfaces/GetContentOptions.md
  });
  // If there's data, return that data
  if (links && links.length) return {links};
  // otherwise, if there's no data, return an empty array
  return {
    links: []
  };
};

interface LoaderData {
  links: BuilderContent[];
}

export default function header() {
    const {links}: LoaderData = useLoaderData<BuilderContent>();
    return (
        <Navbar>
        <NavbarBrand>
            <p className="font-bold text-inherit">ACME</p>
        </NavbarBrand>
        <NavbarContent className="hidden sm:flex gap-4" justify="center">
            {links.map((link, index) => (
                <NavbarItem>
                    <Link key={index} color="foreground" href={link.data?.url}>
                        {link.data?.label}
                    </Link>
                </NavbarItem>
            ))}
        </NavbarContent>
        </Navbar>
    );
}

The error is Property links does not exist on JsonifyObject<BuilderContent>

2

Hello @kryptoz,

Would you be able to share your data model structure? Or builder public API key?

There might need some alternation to the code depending on how data model nav-links is defined

Here is an example how I had to modify the code to get the Navlink working

import { BuilderComponent, builder } from "@builder.io/react";
import type { LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { CUSTOM_COMPONENTS } from "../builder-registry";
import type { BuilderContent } from "@builder.io/sdk";

const builderApiKey = process.env.PUBLIC_BUILDER_KEY!;
builder.init(builderApiKey);

// Fetch contents of the page
export const loader = async ({ params, request }: LoaderFunctionArgs ) => {
  try {
    const links = await builder.getAll("navigation-links", {
      options: {
        cacheBust: true,
      }
    });

    const page = await builder.get("page", {
      userAttributes: {
        urlPath: "/" + params["*"],
      },
      locale: params.locale,
    }).toPromise();
    
    return { page, builderApiKey, links: { links } };
  } catch (error) {
    throw new Error(`Error fetching data from Builder.io: ${error.message}`);
  }
};

// Define and render the page.
export default function Page() {
  const { page, builderApiKey, links }: { page: BuilderContent, builderApiKey: string, links: { links: BuilderContent[] } } = useLoaderData();

  console.log("🚀 ~ Page ~ links:", links.links[0].data.links[0].text);


  return (
    <>
      <header>
        <nav>
          {links && links.links && links.links.length > 0 && links.links.map((link, index) => (
            <a key={index} href={link.data.links[0].url} style={{ margin: '20px', padding: '20px'}}>
              {link.data.links[0].text}
            </a>
          ))}
        </nav>
      </header>
      <BuilderComponent
        customComponents={CUSTOM_COMPONENTS}
        apiKey={builderApiKey}
        model="page"
        content={page}
      />
    </>
  );
}

declare global {
  interface Env {
    PUBLIC_BUILDER_KEY: string;
  }
}