Issue with dynamic nested route and `getStaticProps` query for contributions document type.
2 replies
Last updated: Oct 4, 2022
A
Hi everyone!
I'm stuck on a tricky implementation of a dynamic nested route and am wondering if there may be a smarter way to go about what I'm trying to achieve. I have a feeling the issue lies in the way I'm writing my
As per the first screenshot, I have a route,
that features the contributions of a particular artist. A given artist ([slug]) may have 3-4 contributions that each should have their own link. For
In
However when I do so, the output is an empty array (even though I'm getting output in Sanity's Vision tool). Why might that be the case?
I'm stuck on a tricky implementation of a dynamic nested route and am wondering if there may be a smarter way to go about what I'm trying to achieve. I have a feeling the issue lies in the way I'm writing my
slug.currentbusiness for groq queries, but I'm not 100% sure.
As per the first screenshot, I have a route,
/residences/[slug]/contributions/[contributions].js
[contributions].js, I've set up my
getStaticPathsas follows (referencing the artist + the reference to their contributions):
export async function getStaticPaths() {
const data = await client.fetch(
groq`*[_type == "artistesEnResidence" && defined(slug.current) && defined(contributionsEcrivain)] {
"slug": slug.current,
contributionsEcrivain[]->{
"slug": slug.current,
},
}`
);
const pages = data.reduce((arr, item) => {
item.contributionsEcrivain.forEach((c) => {
const params = {
slug: item.slug,
contributions: c.slug,
};
arr.push({ params: params });
});
return arr;
}, []);
return {
paths: pages.map((page) => page),
fallback: true,
};
}getStaticProps, rather than querying the artist -> their contributions, I just reference the contributions document type as follows:
export const residencesEcrivainQuery = groq`
*[_type == "contributionsEcrivain" && defined(slug.current)][] {
_id,
title,
associatedArtist[0]->{
"slug": slug.current,
title,
},
associatedNumero[0]->{
"slug": slug.current,
number
},
body,
"slug": slug.current,
}
`;Oct 4, 2022, 1:18 PM
A
I have also tried to manually infer like so:
But was met with the following error (presumably because the query is returning an array of 18 "contributions" objects):
getStaticPropsdata for
/residences/lucile-de-peslouan/contributions/cherry-bomb
export async function getStaticPaths() {
const data = [
{
slug: "lucile-de-peslouan",
contributions: "cherry-bomb",
},
];
return {
paths: data.map((post) => ({
params: {
contributions: post.contributions,
slug: post.slug,
},
})),
fallback: true,
};Oct 4, 2022, 1:59 PM
A
Hey guys! I figured it out.
In my
I previously had it set to
Everything is working great now!!
knock on wood
In my
getStaticProps, I was not entering the
slugvalue in
pageDataproperly:
export async function getStaticProps({ params }) {
console.log("params", params);
const footerLogos = await client.fetch(footerLogoQuery);
const pageData = await client.fetch(residencesEcrivainQuery, {
contributions: params.contributions,
slug: params.contributions,
});
return {
props: {
pageData,
footerLogos,
},
revalidate: 10,
};
}slug: params.slug. I had to pass in the right prop to the groq query:
*[_type == "contributionsEcrivain" && slug.current == $slug][0] {...}knock on wood
Oct 4, 2022, 3:25 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.