I am currently utilizing graphCMS in combination with NextJS and have successfully implemented fetching data. However, I am facing an issue where I need to execute 2 queries on the homepage of my website - one for all posts and another for recent posts.
queries.js:
import { gql } from "graphql-request";
export const allPostsQuery = gql`
query AllPosts {
posts {
title
excerpt
slug
createdAt
featuredImage {
url
}
categories {
name
slug
}
author {
bio
name
id
photo {
url
}
}
}
}
`;
export const recentPostsQuery = gql`
query getRecentPosts {
posts(orderBy: createdAt_DESC, last: 3) {
title
createdAt
slug
featuredImage {
url
}
}
}
`;
Exported function utilized within /pages/index.tsx:
export const getStaticHome = async () => {
const query = queries.allPostsQuery;
const data = await request(graphqlAPI, query);
return data.posts;
};
getStaticProps function:
export const getStaticProps: GetStaticProps = async () => {
// const posts = await getAllPosts();
const posts = await getStaticHome();
if (!posts) {
return {
notFound: true,
};
}
return {
props: {
posts,
},
revalidate: 60,
};
};
However, attempting to combine both queries into a single graphql-request call results in a defined string instead of the actual Name value:
export const getStaticHome = async () => {
const query = `
{
"posts": ${queries.allPostsQuery},
"recentPosts": ${queries.recentPostsQuery}
}
`;
const data = await request(graphqlAPI, query);
return data.posts;
};
I am trying to include multiple queries in a single graphql-request, but it seems that this approach is not working as expected. Any insights into what I might be missing?