Errors with getStaticPaths for dynamic pages

Hi,

I have a lib/api.js file where I fetch all the data that I want from the Prismic API using gql. I am currently working on dynamic pages, where [position].js will have the uid for documents of this type.

However, I am getting this error in my terminal: {"message":"Error during variable coercion. Violations:\n\nVariable '$slug' expected value of type 'String!' but value is undefined. Reason: Expected non-null value, found null. (line 2, column 26):\n query PositionBySlug($slug: String!, $lang: String!) {\n ^"}.

I get that it's undefined but I cannot wrap my head around why. I'm new to NextJS and the React universe, and also GraphQL.

Let's start at the beginning. I use two async functions in lib/api.js that I import in [position].js. These are:

export async function getAllPositionSlugs() {
    const data = await fetchApi(`
        {
            allPositions {
                edges {
                    node {
                        _meta {
                            uid
                        }
                    }
                }
            }
        }
    `)

    return data.allPositions.edges
}

This simply returns the uid ("slug") of all the documents that are of type position.

Now for the position data:

export async function getAllPositions(slug, previewData) {
    const data = await fetchApi(`
    query PositionBySlug($slug: String!, $lang: String!) {
        position(uid: $slug, lang: $lang) {
            position_title
            _meta {
                uid
            }
        }
    }`,
    {
        previewData,
        variables: {
            slug,
            lang: API_LOCALE,
        },
    })

    return data
}

And here is where the error is. With the slug being undefined.

Here are some relevant [position].js code, getStaticProps and getStaticPaths:

export async function getStaticProps({ params, preview = false, previewData }) {
    const data = await getAllPositions(params.slug, previewData)
    return {
        props: {
            preview,
            position: data.position ?? null
        },
    }
}

export async function getStaticPaths() {
    const allPositions = await getAllPositionSlugs()
    return {
        paths: allPositions.map(({ node }) => `/position/${node._meta.uid}`) || [],
        fallback: false,
    }
}

Thanks for the help! And sorry for the wall of text.

Hey Remi,

Thanks for posting! I think we can work through this together.

The first thing that stands out to me is the name of your param. Your file is called [position].js, so I would expect the param to be params.position, not params.slug.

If you change this line:

const data = await getAllPositions(params.slug, previewData)

To:

const data = await getAllPositions(params.position, previewData)

Does that solve te error?

Yes it does, thank you so much for the help :innocent:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.