graphql-request - Run multiple queries with one request when using getStaticProps?

Question

I am using graphCMS with NextJS and now I am fetching my data which works perfectly fine. But I have 2 queries which I need on the homepage of my website all posts and 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 which is being used inside /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,
  };
};

But doing this instead doesn't work and returns defined string instead of Name:

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 fetch multiple queries with on graphql-request call, but this won't allow me. Am I missing something?

Answer 1

Solved by having unique names for each query.

export const allPostsQuery = gql`
  query Posts {
    posts: posts {
      title
      excerpt
      slug
      createdAt
      featuredImage {
        url
      }
      categories {
        name
        slug
      }
      author {
        bio
        name
        id
        photo {
          url
        }
      }
    }

    recentPosts: posts(orderBy: createdAt_DESC, last: 3) {
      title
      createdAt
      slug
      featuredImage {
        url
      }
    }
  }
`;