Get help on Discord

Including author name and image in GROQ query for multiple types

4 replies
Last updated: Feb 28, 2022
I have a GROQ query where I am checking for multiple types. But the author name is not working. I have author reference which I am using for all these types. How can i Include the following to this query:
Need this:

author -> {
      name,
      image
 }
inside this:

groq`*[_type in ["homePage", "page", "article", "case"] && defined(slug.current)][].slug.current`
AI Update

You need to add a projection to your query that includes the author reference. Here's how to modify your query:

*[_type in ["homePage", "page", "article", "case"] && defined(slug.current)]{
  "slug": slug.current,
  author->{
    name,
    image
  }
}

The key changes:

  1. Replace the [] with {} - The [] at the end was just selecting the slug values directly. You need a projection (curly braces) to shape the data and include multiple fields.

  2. Use the -> operator - This dereferences the author reference, following it to the actual author document and pulling the fields you need.

  3. Rename slug for clarity - Since you're now returning an object with multiple fields, I've used "slug": slug.current to make it explicit, though you could also just use slug if you want the whole slug object.

If you want to keep the flat array of just slug strings AND get author data, you'd need to decide on your data structure. Most likely you want something like:

*[_type in ["homePage", "page", "article", "case"] && defined(slug.current)]{
  slug,
  author->{
    name,
    image
  }
}

This returns an array of objects, each containing the full slug object and the dereferenced author data. The -> operator is what makes reference dereferencing work in GROQ projections - it follows the reference and lets you select specific fields from the referenced document.

After changing the code I get the following erro:

TypeError: slug.split is not a function

export async function getStaticPaths() {
  const pageQueries = await getClient().fetch(
    groq`*[_type in ["homePage", "page", "article", "case"] && defined(slug.current)]{
      'slug': slug.current,
      author->{
        name,
        image,
      },
    }`
  );

  // Split the slug strings to arrays (as required by Next.js)
  const paths = pageQueries.map((slug: string) => ({
    params: { slug: slug !== "/home" && slug.split("/").filter((p) => p) },
  }));

  return { paths, fallback: false };
}

After changing the code I get the following erro:

TypeError: slug.split is not a function

export async function getStaticPaths() {
  const pageQueries = await getClient().fetch(
    groq`*[_type in ["homePage", "page", "article", "case"] && defined(slug.current)]{
      'slug': slug.current,
      author->{
        name,
        image,
      },
    }`
  );

  // Split the slug strings to arrays (as required by Next.js)
  const paths = pageQueries.map((slug: string) => ({
    params: { slug: slug !== "/home" && slug.split("/").filter((p) => p) },
  }));

  return { paths, fallback: false };
}

Each item in 
pageQueries
is now an object, so you can’t run 
slug.split()
. You’ll likely want to rename your parameter inside your map (e.g., to 
item
) and then do 
item.slug.split()
.
I did now I have item.slug instead. But the query is not using mine but still the default one.

export async function getStaticPaths() {
  const pageQueries = await getClient().fetch(
    groq`*[_type in ["homePage", "page", "article", "case"] && defined(slug.current)]{
      ...,
      'slug': slug.current,
      body,
      title,
      _createdAt,
      _id,
      _rev,
      _type,
      _updatedAt,
      caseManager->{
        name,
        image,
      },
      author->{
        name,
        image,
      },
    }`
  );

  const paths = pageQueries.map((item: any) => ({
    params: {
      slug: item.slug.split("/").filter((p: any) => p),
    },
  }));

  return { paths, fallback: false };
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?