Get help on Discord

Fetch multiple Sanity content types in Next.js getStaticProps

1 replies
Last updated: Jul 13, 2021
Hi guys, I am using the Sanity Client to fetch data with next js using the getStaticProps for pages like about, contact etc etc
Now fetching works but I also want to fetch a different type like “authors” on the same page and map through them.

But i don’t want to copy paste the client? How can I fetch multiple types on one page.

thanks!

Code:


import  sanityClient  from "../lib/client";
import { aboutQuery, teamQuery } from "../lib/queries";

const People = ({ context }) => {
    const { title, author } = context;

    console.log(context);

    return (
        <div>
            <h2>{title}</h2>
            <p>{author.name}</p>
        </div>
    )
}

export default People;

export async function getStaticProps() {
    const context = await sanityClient.fetch(aboutQuery, teamQuery);


    return { props: { context } };
  }
Queries:


export const aboutQuery = `*[_type == "page" && title == "About"][0]{
    _id,
    title,
    slug,
    author-> {
        name
    }
}`;

export const teamQuery = `*[_type == "author"]{
    _id,
    bio,
    slug,
    jobTitle,
    name,
    authorImage,
}`;

AI Update

Good news - you don't need to copy-paste the client! You can make multiple fetch calls with the same client, or even better, fetch multiple queries at once. Here are a few approaches:

Option 1: Multiple Fetch Calls (Simplest)

export async function getStaticProps() {
    const aboutData = await sanityClient.fetch(aboutQuery);
    const teamData = await sanityClient.fetch(teamQuery);

    return { 
        props: { 
            aboutData,
            teamData 
        } 
    };
}

const People = ({ aboutData, teamData }) => {
    const { title, author } = aboutData;

    return (
        <div>
            <h2>{title}</h2>
            <p>{author.name}</p>
            
            <h3>Team Members:</h3>
            {teamData.map((member) => (
                <div key={member._id}>
                    <h4>{member.name}</h4>
                    <p>{member.jobTitle}</p>
                </div>
            ))}
        </div>
    )
}

Option 2: Parallel Fetching with Promise.all (Faster)

export async function getStaticProps() {
    const [aboutData, teamData] = await Promise.all([
        sanityClient.fetch(aboutQuery),
        sanityClient.fetch(teamQuery)
    ]);

    return { 
        props: { 
            aboutData,
            teamData 
        } 
    };
}

This runs both queries in parallel, which is faster than sequential fetching.

Option 3: Single GROQ Query (Most Efficient)

You can combine both queries into a single GROQ query that returns an object with both datasets:

export const combinedQuery = `{
    "about": *[_type == "page" && title == "About"][0]{
        _id,
        title,
        slug,
        author-> {
            name
        }
    },
    "team": *[_type == "author"]{
        _id,
        bio,
        slug,
        jobTitle,
        name,
        authorImage,
    }
}`;

export async function getStaticProps() {
    const data = await sanityClient.fetch(combinedQuery);

    return { 
        props: { 
            aboutData: data.about,
            teamData: data.team
        } 
    };
}

I'd recommend Option 2 (Promise.all) for your use case - it keeps your queries separate and maintainable while still being performant. Option 3 is great if you want to minimize API calls, but Option 2 is cleaner when you're reusing queries across different pages.

The key issue in your original code was that sanityClient.fetch() only accepts one query at a time - passing two queries as separate arguments (sanityClient.fetch(aboutQuery, teamQuery)) doesn't work. You need to make separate fetch calls or combine the queries in GROQ itself.

Show original thread
1 reply
you can query for multiple types like this:
{
  'type1': *[_type == 'type1'], 
  'type2': *[_type == 'othertype'] }
So in your case you can probably import both queries &amp; reuse them:


client.fetch(`
  {
    'team': ${teamQuery},
    'about': ${aboutQuery},
  }
`)

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?