0

I'm using Prismic and NextJS. After reading their documentation on how to fetch data using the new App folder, I created this src/[uid]/page.jsx file

import { createClient } from "@/prismicio";

export default async function Page({ params }) {
  const client = createClient();

  const page = await client.getByUID("post", params.uid);

  return <main>{page.uid}</main>;
}

Which is returning the uid just fine.

The problem arises when I try to fetch whatever other data. In my schema (custom type) a few fields like title and content. But whenever I try to make {page.title} it doesn't work. I get no error from it, it simply doesn't render anything.

I tried a few things to fix this. First, I tried this snippet from the Prismic documentation itself

import { createClient } from "@/prismicio";

export default async function Page({ params }) {
  const client = createClient();

  const page = await client.getByUID("page", params.uid);

  return <main>{page.data.title}</main>;
}

But I get the following error. And by the way, titulo1 is the value passed to the uid field in my documents within Prismic.

Error: [function at(..)] unexpected field 'my.page.uid' on line:1 col:6 in query '[[at(my.page.uid, "titulo1")]]' [[at(my.page.uid, "titulo1")]]

I also tried removing the params.uid. That gets me an error as well.

Then, I tried doing something like this: const page = await client.getByUID("post", params.uid, params.title);

But this simply have no effect and changes nothing.

Finally, tried to simply use params as some of their examples. In that case I'd get the following error

Error: ']' expected but '[' found on line:1 col:2 in query '[[at(my.post.uid, [object Object])]]' [[at(my.post.uid, [object Object])]]

I don't know if this is relevant or not but my prismicio.js route configuration is this

const routes = [{
    type: "post",
    path: "/:uid",
  },
];

Also, as it could be related, when I try to query all documents of type post using the snippet they have in their documentation I get an error as well.

import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();

  const pages = await client.getAllByType("post");

  return (
    <ul>
      {pages.map((page) => (
        <li>{page.data.title}</li>
      ))}
    </ul>
  );
}

And the error is

Error: Objects are not valid as a React child (found: object with keys {type, text, spans}). If you meant to render a collection of children, use an array instead.

So, I'm confused on how to move forward as I tried to replicate what they have in their documentation but I'm failing to do so. Any ideas on how to fix this?

SnooDucks299792
  • 163
  • 1
  • 1
  • 11

1 Answers1

1

But I get the following error. And by the way, titulo1 is the value passed to the uid field in my documents within Prismic.

Error: [function at(..)] unexpected field 'my.page.uid' on line:1 col:6 in query '[[at(my.page.uid, "titulo1")]]' [[at(my.page.uid, "titulo1")]]

This could happen if your custom type does not have a uid field. It does not, add a uid field and ensure the custom type is a "Repeatable" type.

Then, I tried doing something like this: const page = await client.getByUID("post", params.uid, params.title);

The third argument, params.title, is not valid; the third parameter is an object of options. Passing params.title will not have any affect on getByUID.

Finally, tried to simply use params as some of their examples. In that case I'd get the following error

Error: ']' expected but '[' found on line:1 col:2 in query '[[at(my.post.uid, [object Object])]]' [[at(my.post.uid, [object Object])]]

This happens because passing objects to the second argument of getByUID() is invalid; it must be a string UID value (e.g. params.uid).

…And the error is

Error: Objects are not valid as a React child (found: object with keys {type, text, spans}). If you meant to render a collection of children, use an array instead.

If your page.data.title property is a rich text field, you will need to use @prismicio/react's <PrismicRichText> or <PrismicText> component to render the value.

You can learn more about the components and how to use them here: https://prismic.io/docs/technical-reference/prismicio-react#prismicrichtext

Angelo Ashmore
  • 366
  • 1
  • 4