Generating dynamic pages from CMS data

Issues
1

Hi I am trying to generate dynamic pages based on my CMS data. I am using next.js and react and I have the following code

export const getStaticProps = async ({
  params: { slug },
}: {
  params: { slug: string };
}) => {
  const individualPageDetailQuery = `*[_type == "page" && slug.current == "${slug}"][0] {
    _id,
    _createdAt,
    title,    
    body,
    'mainImage':mainImage.asset->url
	 }
	 `;

  const individualPageDetail = await sanity.fetch(
    individualPageDetailQuery
  );

  return {
    props: { individualPageDetail },
    revalidate: 3600,
  };
};

export async function getStaticPaths() {
  const pageListQuery = `*[_type == "page"] {
    'slug': slug.current,
    'thumbnail': thumbnail.asset->url
	 }
	 `;

  const pageList = (await sanity.fetch(pageListQuery)) || [];
  const paths = pageList.map((item: any) => ({
    params: { slug: item.slug },
  }));
  return {
    paths,
    fallback: "blocking",

  };
}

The problem is I do not know how to consume the individualPageDetail in my component or how to pass it down so the page and the content will be generated on the build time. (right now every time I go to page , it shows loading to go get data from sanity). Would you tell me how should use this prop in either ui or how to pass it down to the function?

2

The easiest thing to do is to use the built-in sanity fetcher component, instead of wiring up code yourself like this

If you want to do it this way for any reason, you can still do so. The details data is now passed into your page as a crop, which you can do whatever you want with. You can pass it in as an override prop into your component, see the dogs for the api. Or you can provide it via react context and register a consumer component as a providesdata code component.

3

The issue that I have with the built-in sanity fetcher is it will fetch the data once the page loads and does not fetch it in the build time. At the same time I cannot update the title and meta description of the page. That is why I opted to used the built-in next js data fetcher but at the same time I was hoping to send these data to the sanity fetcher so the page will be ready and there will be no need to feth after going to page

4

Hi @dressy_ladybug, the sanity fetcher should fetch at pre-render time unless something else is causing it to not be able to do that. Can you verify by trying from a brand new plasmic project and using create-plasmic-app to run it?

It’s not very intuitive right now, but you can update the title and meta of the page by using the page metadata override component from the insert menu. You have to insert this somewhere within your sanity fetcher and then you can use dynamic values to fill in the title etc. https://youtu.be/BxkttuUOUQg

5

@yang sorry for the delay on my part. I was working on our API side for a while. here is a loom recording. I went ahead and used the sanity fetcher but as you can see in the video it fetches the content on a runtime: https://www.loom.com/share/b2b98eb952914fb8986b92000fec93c6?sid=b9eb62a5-1432-48df-9b42-ffab889a329f