Next.js - How to Make a Route Based on a GROQ Query

26 replies
Last updated: Jun 20, 2022
Hi, I'm making a project with Next.js and sanity. I want to make a route based on a groq query, but it is nested and not possible with nextjs. How would I solve this problem? THe params cannot be nested I think
export async function getStaticPaths() {
  const paths = await client.fetch(
    `*[_type == "personen"]{
    slug,
    Projecten[] -> {
    'params': {
      'projectSlug': slug.current 
      }
    }
  } `
  );

  return {
    paths,
    fallback: true,
  };
}
Jun 20, 2022, 11:49 AM
THis is the error message that I get
Jun 20, 2022, 12:40 PM
That‘s because you’re returning incorrect data as the
paths
value. Are you trying to return all the project paths?
Jun 20, 2022, 1:25 PM
no only the current one
Jun 20, 2022, 1:26 PM
You might be mixing
getStaticProps
and
getStaticPaths
.
getStaticPaths
is used to determine all the paths matching that route. So that will be all the projects.
getStaticProps
is used to determine what data to render for each path.
Jun 20, 2022, 1:28 PM
When I click on the reference of Project[0] a new page has to open with the current project
Jun 20, 2022, 1:28 PM
Right. And then you’re trying to have a page per project on your frontend, right?
Jun 20, 2022, 1:29 PM
yes
Jun 20, 2022, 1:29 PM
I have a page where I get a overview of all three projects (based on the person’s name, in this case Raquel) and when I click on one project I have to go to that current project what is clicked on
Jun 20, 2022, 1:30 PM
Right, so for your project page itself,
getStaticPaths
needs to query all projects and return their slug.
Jun 20, 2022, 1:32 PM
const projects = await client.fetch(
  `*[_type == "projecten"] { "slug": slug.current }`
);
const paths = projects.map(project => ({ params: { slug: project.slug } }))

return { paths, fallback: true }
Jun 20, 2022, 1:32 PM
Yes but it is based on the person right, because it is from a reference from the person?
Jun 20, 2022, 1:33 PM
Not for your project route no.
/pages/projectDetail/[projectSlug].js
is not about a person. It’s the page for a project. Regardless of who it belongs to.
Jun 20, 2022, 1:34 PM
oh okay, so when I click on example project 1 from the projectOverview page where I preview/display all the three the projects I go to that page, and it doesn’t matter from what person it is?
Jun 20, 2022, 1:36 PM
Exactly. Because you go to the page for that project, so at this stage it doesn’t matter whether you come from a person’s page, the home page, a Google search, Twitter, etc.
Jun 20, 2022, 1:38 PM
Error: A required parameter (projectSlug) was not provided as a string in getStaticPaths for /projectDetail/[projectSlug]
I get this error message when I use the this in my getStaticProps?

  const projects = await client.fetch(
    `*[_type == "projectDetail"] { "projectSlug": slug.current }`
  );
  const paths = projects.map((project) => ({ params: { projectSlug: project.slug } }));

  return { paths, fallback: true };
Jun 20, 2022, 1:45 PM
If you call your property
projectSlug
in the query, you need to read it as
project.projectSlug
in the map. Right now you’re reading
project.slug
which is undefined.
Jun 20, 2022, 1:46 PM
alright thanks a lot! 🙂
Jun 20, 2022, 1:47 PM
the route is working! But it is not linked with the projectOverview. These are the paths in the projectOverview, how can I fix this?
export async function getStaticPaths() {
  const paths = await client.fetch(
    `*[_type == "personen" && defined(slug.current)]{
      "params": {
        "slug": slug.current
      }
    }`
  );

  return {
    paths,
    fallback: true,
  };
}
export const getStaticProps = async ({ params: { slug } }) => {
  const query = `*[_type == "personen" && slug.current == $slug][0]{
    name,
    slug,
    Projecten[] -> {
    projectNaam,
    description,
    projectImage,
    } 
  }  
  `;

  const project = await client.fetch(query, { slug });
  return {
    props: { project },
  };
};
Jun 20, 2022, 1:53 PM
Thanks for helping me, I’ve been stuck on this for the last few days
Jun 20, 2022, 1:54 PM
I’m a little confused what you mean with "linked to the project overview.” You mean like your project overview page linking to all these project pages?
Jun 20, 2022, 1:56 PM
The projectOverview looks like this and it is based of the paths I send above. It is referenced in the query. The project overview is the list of projects from the person (in the screenshot from the sanity studio)
Jun 20, 2022, 1:59 PM
WHen I click on project 1 raquel I want to go to that project, but It can’t find that route right now I get undefined
Jun 20, 2022, 1:59 PM
The projectOverview page is based on the person, I hope you get what I mean? In the screenshot (https://sanity-io-land.slack.com/files/U03LEHK1D7E/F03LCL9E75G/screenshot_2022-06-20_at_15.27.41.png ) I only have one person, Raquel but there are more persons
Jun 20, 2022, 2:05 PM
This is what the component looks like of the projectOverview
Jun 20, 2022, 2:11 PM
I figured it out, thank you for your help!
Jun 20, 2022, 2:23 PM
Yay, amazing. 🙂
Jun 20, 2022, 2:27 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.