fetching data from graphql returning undefined

I have a list of data from graphql I am returning in from a service folder and referencing it in an index file, but for some unknown reason these data are not being fetched as I keep getting the error Cannot read properties of undefined (reading 'url') when I try to fetch a featured image and even after I comment the image line out, I get an empty result. I haven't spotted any error so please help me figure out what I may be doing wrong with the following code below

services/index.js

export const getBlogPosts = async () => {
    const query = gql `
    query MyQuery {
        blogPostsConnection {
          edges {
            node {
              title
              slug
              excerpt
              createdAt
              featuredImage {
                url
              }
              blogcategories {
                name
                slug
              }
              blogTags {
                name
                slug
              }
            }
          }
        }
      }
    `
    const results = await request(graphqlAPI, query)
    return results.blogPostsConnection.edges
}

pages/blog.jsx

import React, {useState, useEffect} from 'react'
import {getBlogPosts} from '../services'
import {GiTimeBomb} from 'react-icons/gi'
import moment from 'moment'


const Home = () => {

  const [blogposts, setBlogPosts] = useState([]);

  useEffect(() => {
    getBlogPosts().then((result) => {
      setBlogPosts(result);
    });
  }, []);

 return (
    <div>
{blogposts.map((blogpost) => (
            <div className="bg-white shadow-sm rounded-sm" key={blogpost.slug} blogpost={blogpost.node}>
                <a href="#" className="overflow-hidden block">
                <img src={blogpost.featuredImage.url} alt='no'className="w-full h-96 object-cover transform hover:scale-110 transition duration-500" />
                </a>
                <div className="p-4">
                  <a href="#">
                      <h2 className="text-2xl font-semibold text-gray-700 hover:text-blue-500 transition">{blogpost.title}</h2>
                  </a>
                  <p className="text-gray-500 text-sm mt-2">{blogpost.excerpt}</p>
                  <div className="flex mt-3 space-x-5">
                      <div className="flex items-center text-gray-400 text-sm">
                      <span className="mr-2 text-sx">
                          <i><AiOutlineUser /></i>
                      </span>
                      Kimmoramicky
                      </div>
                      <div className="flex items-center text-gray-400 text-sm">
                      <i className='pr-1 text-xs'><GiTimeBomb /></i>
                      <span>{moment(blogpost.createdAt).format('MMM DD, YYYY')}</span>
                      </div>
                  </div>
                  <div className='mt-4'>
                    <a href='/blogPost' className="px-3 py-1 text-sm border border-gray-200 rounded-sm hover:bg-blue-500 hover:text-white transition">Read more...</a>
                  </div>
                </div>
            </div>      
            ))}
</div>
  )
}

export default Home