👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue with dynamic nested route and `getStaticProps` query for contributions document type.

2 replies
Last updated: Oct 4, 2022
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
slug.current
business for groq queries, but I'm not 100% sure.
As per the first screenshot, I have a route,
/residences/[slug]/contributions/[contributions].js
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
[contributions].js
, I've set up my
getStaticPaths
as 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,
  };
}
In
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,
  }
`;
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?
Oct 4, 2022, 1:18 PM
I have also tried to manually infer
getStaticProps
data for
/residences/lucile-de-peslouan/contributions/cherry-bomb
like so:

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,
  };
But was met with the following error (presumably because the query is returning an array of 18 "contributions" objects):
Oct 4, 2022, 1:59 PM
Hey guys! I figured it out.
In my
getStaticProps
, I was not entering the
slug
value in
pageData
properly:

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,
  };
}
I previously had it set to
slug: params.slug
. I had to pass in the right prop to the groq query:

*[_type == "contributionsEcrivain" && slug.current == $slug][0] {...}
Everything is working great now!!
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.

Was this answer helpful?