Error fetch data with Nextjs

Developing with Prismic
1

Hello there , I'm trying to fetch data using this way

export async function getStaticProps({ previewData }) {

    const client = createClient({ previewData })

    // const page = await client.getByUID('page', 'about')

    const page = await client.getSingle('homepage')

    // const homepage = await page.json()

    return {

        props: { page },

    }

}

but I got this error, any suggestion?

image
image942×332 12.8 KB

Thanks

3

Hello Ali,

Welcome to the Prismic community, and thanks for reaching out to us.

Could you console log page parameters and paste here what you get?

Thanks,
Priyanka

4

Thanks @Priyanka , it's undefined

5

Okay, @itsalimanuel. In that case, I need more details:

  1. What version of @prismicio/client are you using?
  2. How did you set up prismic in your project? Have you followed the Setup Prismic article?
  3. Did you import createClient from prismicio file?

It'd be better if you can send me your project code (Either zip files or GitHub repo)

Thanks,
Priyanka

6

"@prismicio/client": "^6.4.1", yeah I followed the article

This is my setup for the intro page (for example )

import { createClient } from '../../prismicio';

export default function App({data})
{
    return (
        <LayoutApp>
            <VideoIntro id='video-intro'>
                <Video id='videoIntro' autoPlay muted loop playsInline src={videoPlaceholder}></Video>
                <IntroTitleStyle id="inrot-title">
                    <HeaderIntroTitle id='intro-title-name'>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>U</span>
                        <span id='intro-span'>L</span>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>O</span>
                        {/* {data.title} */}
                        {/* <PrismicText field={page.data.introTitle} /> */}
                    </HeaderIntroTitle>

                    <Link href='#'>

                        <EnterLink id='link'>
                            Enter the ocean
                        </EnterLink>
                    </Link>
                </IntroTitleStyle>

            </VideoIntro>

        </LayoutApp >
    )
}

export async function getStaticProps({ previewData }) {
    const client = createClient({ previewData })

    // const page = await client.getByUID('page', 'about')
    const page = await client.getSingle('homepage')
    console.log(page)
    // const homepage = await page.json()
    return {
        props: { page },
    }
}

I will drop the zip file in a message

7

Hello @itsalimanuel

I have received your message and looked at your zip files. I found one thing that you need to fix:

Your linkResolver function and folder structure is are not aligned. In your folder, you have index.js inside home folder, but in link resolver, you are giving path like / which is till the root of your folder structure /pages.

  1. Either you change the path in link resolver for / to /home, that way you will have URL like [HOST]/home
  2. OR you move your index.js from /pages/home to /pages and keep the linkResolver as the same, that way you will have URL like [HOST]/

In approach one, I have changed linkResolver function in prismicio.js file: (

export function linkResolver(doc) {
    switch (doc.type) {
        case 'homepage':
            return '/home'
        case 'page':
            return `/${doc.uid}`
        default:
            return null
    }
}

Let me know if you have any further questions.

Thanks,
Priyanka

8

Hello again , I have changed the function to be like "

// Update the Link Resolver to match your project's route structure
export function linkResolver(doc) {
    switch (doc.type) {
        case 'homepage':
            return '/home'
        case 'page':
            return `/${doc.uid}`
        default:
            return null
    }
}

and in the home

export default function Home({ page }) {
    console.log(`the resault` + '  ' + page)
  
    return (
        <LayoutApp>
            <VideoIntro id='video-intro'>
                <Video id='videoIntro' autoPlay muted loop playsInline src={videoPlaceholder}></Video>
                <IntroTitleStyle id="inrot-title">
                    <HeaderIntroTitle id='intro-title-name'>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>U</span>
                        <span id='intro-span'>L</span>
                        <span id='intro-span'>P</span>
                        <span id='intro-span'>O</span>
                        {/* {page.titleHome} */}
                        {/* {page.data.titleHome} */}
                        {/* <PrismicText field={page.data.introTitle} /> */}
                    </HeaderIntroTitle>

                    <Link href='#'>

                        <EnterLink id='link'>
                            Enter the ocean
                        </EnterLink>
                    </Link>
                </IntroTitleStyle>

            </VideoIntro>

        </LayoutApp >
    )
}

export async function getStaticProps({ previewData }) {
    const client = createClient({ previewData })

    const page = await client.getByUID('page', 'home')

    return {
        props: { page }, // Will be passed to the page component as props
    }
}

but the result continue undefined :face_with_spiral_eyes:

9

Hello @itsalimanuel

You have changed the query method in your code. I think you are querying a singleton Custom Type is homepage. The working code for me for this homepage is:

export async function getStaticProps({ previewData }) {
    const client = createClient({ previewData })
    const page = await client.getSingle('homepage')
    console.log("page is", page.data)
    return {
        props: { page },
    }
}

Now you need to hit the URL: http://localhost:3000/home to see your homepage.

Thanks,
Priyanka

10

Thank you @Priyanka , works now :tada:

11

Great @itsalimanuel. Feel free to reach out to us if you have any other questions.

1 Like