Error Loading Data from Strapi CMS with Apollo and Nuxt3 (Vue)

Question

Good evening,

I'm facing an issue while trying to load data from Strapi CMS using Apollo (@nuxtjs/apollo) and I keep encountering the following error:

500
Cannot read properties of null (reading 'homepage')

I've attached an index.vue and package.json file for reference.

Here's the strange part: If I change the data type declaration in index.vue from const to let or from const to var, and then save the file and perform a automatic hot reload, the page renders correctly with all the data displayed. However, if I then hit the refresh button in Chrome, I get the error mentioned above.

The GraphQL query itself seems to work fine. I'm relatively new to Nuxt.js and I'm unsure about the next steps.

Could someone please help me?

index.vue

<template>
  <NavBar />
  <div v-for="(body, index) in data?.homepage?.data.attributes.body" :key="index">
    <div v-if="body.__typename === 'ComponentContentTypeCtLandingSection'">
      <ContentTypeLandingSection :body="body" :pos="index" />
    </div>
    <div v-if="body.__typename === 'ComponentContentTypeCtCustomersCounter'">
      <ContentTypeCustomerCounter :body="body" :pos="index" />
    </div>
    <div v-if="body.__typename === 'ComponentContentTypeCtGallery'">
      <ContentTypeGallery :body="body" :pos="index" />
    </div>
    <div v-if="body.__typename === 'ComponentContentTypeCtServices'">
      <ContentTypeServices :body="body" :pos="index" />
    </div>
    <div v-if="body.__typename === 'ComponentContentTypeCtText'">
      <ContentTypeText :body="body" :pos="index" />
    </div>
  </div>
  <ContactForm />
  <Footer />
</template>

<script setup lang="ts">
import gql from "graphql-tag";

const GET_HOMEPAGE = gql`
  query Homepage {
    homepage {
      data {
        id
        attributes {
          body {
            __typename
            ... on ComponentContentTypeCtLandingSection {
              id
              title
              description
              images {
                data {
                  id
                  attributes {
                    url
                    alternativeText
                  }
                }
              }
            link {
            id
            label
            url
            style
            unterseiten {
              data {
                id
                attributes {
                  title
                  slug
                }
              }
            }
          }
            }
            __typename
            ... on ComponentContentTypeCtGallery {
              id
              headline
              GalleryImage {
                id
                title
                image {
                  data {
                    id
                    attributes {
                      url
                      alternativeText
                    }
                  }
                }
              }
            }
            __typename
            ... on ComponentContentTypeCtServices {
              id
              headline
              Card {
                title
                description
                icon {
                  data {
                    id
                    attributes {
                      url
                      alternativeText
                    }
                  }
                }
              }
            }
            __typename
            ... on ComponentContentTypeCtCustomersCounter {
              id
              customers
              hours
              infusions
              founded
            }
            __typename
            ... on ComponentContentTypeCtText {
              id
              title
              basetext {
                id
                headline
                content
              }
            }
          }
        }
      }
    }
  }
`;

const { data } : any = await useAsyncQuery(GET_HOMEPAGE);
</script>

package.json

{
  "name": "saunabackend",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi start",
    "build": "strapi build",
    "strapi": "strapi"
  },
  "devDependencies": {},
  "dependencies": {
    "@strapi/plugin-graphql": "4.10.7",
    "@strapi/plugin-i18n": "4.10.7",
    "@strapi/plugin-users-permissions": "4.10.7",
    "@strapi/strapi": "4.10.7",
    "better-sqlite3": "8.0.1"
  },
  "author": {
    "name": "A Strapi developer"
  },
  "strapi": {
    "uuid": "390a5c3f-0d38-4239-a39b-c25a603fdaee"
  },
  "engines": {
    "node": ">=14.19.1 <=18.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT"
}

I attempted to load data from Strapi CMS using Apollo in a Nuxt.js application. I defined a GraphQL query (GET_HOMEPAGE) to fetch the homepage data. I expected the data to be fetched and displayed on the page as intended.

In the index.vue component, I iterated over the data?.homepage?.data.attributes.body array using a v-for loop to render different components based on their typename. I expected the components to render properly, and the data to be displayed correctly.

However, I encountered an issue: when I initially loaded the page, I received a 500 error with the message "Cannot read properties of null (reading 'homepage')". This error occurred in the line where I tried to access data?.homepage?.data.attributes.body.