How can i fetch prismic data with next13?

Developing with Prismic
1

I am working in a project with Next13 and i face an issue when i try to fetch prismic data, In Next13 we use the fetch api to create ssg pages, a time ago i used the code below but now i have no ideia how to make it


export const getStaticProps: GetStaticProps = async ({ params, previewData }) => {
  const client = createClient({ previewData });

  const posts = await client.getByType('my-blog', params);

  const postsData = await client.getSingle('home-page', params);
  const menu = await client.getSingle('menu');

  return {
    props: { cards: posts.results, menu, posts: postsData },
  };
};
3

Hi @souzamatheus8174

Thanks for reaching out,

Next.js 13 is not yet fully supported with Prismic, but you can check this thread that might be helpful.

Also, for your Info, we do not officially support the new app directory using React Server Components, and here is some info with workarounds

Please let us know if you need any further assistance,
Fares

4

As shown in your other question (how to fetch only specific data from graphql query), links is an array so unless you loop through it or you access to a specific position you can't do
post.data.links.blog.document.map((test)

I guess you are trying to do this for getting solution to fetch prismic data with Graphql query and also find this topic for the solution:

post.data.links[0].blog.document.map((test)

According to links structure, it seems to be an array of 1 item.

Try to debug your loops by adding a breakpoint or console.logs before returning the JSX, so you will be able to see what you are looping through:

{
  post.data.links.blog.document.map((test) => {
    console.log(test);
    return (
      <GridPosts>
        <GridPost>
          <img src={Post2} alt="Post1" />
          <FlexPost>
            <PostTitle>TEST</PostTitle>
            <PostParagraph>
              A lot of different components that will help you create the
              perfect look for your project
            </PostParagraph>
            <PostTag>Fiction</PostTag>
          </FlexPost>
        </GridPost>
      </GridPosts>
    );
  });
}
1 Like