getStaticProps is always undefined in component

Question

I've followed examples online exactly to use getStaticProps but my component always gets the return from it as undefined. In the code I provided, 'posts' is always undefined and I get a type error of 'Cannot read properties of undefined (reading 'map')'

I'm considering the possibility of it being a firewall issue but I wanted to verify there's nothing wrong with the code itself.

import { GraphQLClient, gql } from "graphql-request";
import { BlogCard } from "../../components/BlogCard";

const graphcms = new GraphQLClient(
  "this is an api string"
);

const QUERY = gql`
  {
    posts {
      title
      datePublished
      content {
        html
      }
    }
  }
`;

export async function getStaticProps() {
  const { posts } = await graphcms.request(QUERY);

  return {
    props: {
      posts,
    },
    revalidate: 10,
  };
}

export default function Home({ posts }) {
  return (
    <main>
      {posts.map((post) => (
        <BlogCard
          title={post.title}
          author={post.author}
          coverPhoto={post.coverPhoto}
          key={post.id}
          datePublished={post.datePublished}
          slug={slug}
        />
      ))}
    </main>
  );
}