GraphQL query giving a "cannot read properties of undefined error"

I wrote a graphql query to get recent posts for a blog app in NextJs in other to display them as widgets

```
export const getRecentPosts = async () =\> {
const query = gql`
query MyQuery {
posts(orderBy: createdAt_ASC
last: 3 )
{title
featuredImage {url}
createdAt
slug
}
}
`;


const result = await request(graphAPI, query);
return result.posts;
};
```

but i keep getting a "Cannot read properties of undefined (reading 'document')" error

and it keeps displaying this error

[NextJs error](

)

I imported the function into the component

```
function PostWidget({ categories, slug }) {

const [relatedPosts, setRelatedPosts] = useState([]);
useEffect(() => {
if (slug) {
getSimilarPosts(categories, slug).then((result) => {
setRelatedPosts(result);
});
} else {
getRecentPosts().then((result) => {
setRelatedPosts(result);
});
}
}, [slug]);

console.log(relatedPosts)
return (
<div className="bg-white shadow-lg rounded-lg p-8 mb-8">
<h3 className="text-xl mb-4 font-semibold border-b p-4">
{slug ? "Related posts" : "Recent posts"}
</h3>
{
relatedPosts.map((post) => (
<div key={post.title} className="flex items-center w-full mb-4">
<div className="w-16 flex-none">
<img
alt={post.title}
height="60px"
width="60px"
className="align-middle rounded-full"
src={post.featuredImage.url}
/>
</div>
</div>
))
}
</div>
)
}
```

but it gives an empty array when i console.log the related posts