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.