I'm getting an error 'Cannot read property $apollodata of undefined' but there is no property of Apollo one my page

Viewed 729

I have a (strange) problem that I can't figure out.

I created a home page with some data from a call with the Apollo module. That all works fine, but when I try to navigate to the next page I get the error 'Cannot read property '$apolloData' of undefined'. The problem is that on the second page I'm navigating to there is no call to Apollo. It's just a static page.

Does Apollo keep refetching the data even when you're not on the page where the queries are called? Is there something I should do before going to the next page?

I have no idea what the problem could be so any help would be greatly appreciated!

Queries that are being called one the homepage:

apollo: {
    query1: {
      query: query1,
      prefetch: true,
    },
    query2: {
      query: query2,
      prefetch: true,
      variables () {
        return { id: this.query2variable }
      }
    },
    query3: {
      query: query3,
      variables () {
        return { id: this.query3variable }
      },
      // Disable the query
      skip () {
        return this.skipQuery
      },
    }
  },

Navigation to the second page:

<div
      class="text-titleColor font-bold w-full block flex-grow lg:flex lg:items-center lg:w-auto"
      :class="open ? 'block' : 'hidden'"
    >
      <div class="text-sm lg:flex-grow text-right">
        <router-link
          to="/"
          class="block mt-4 mr-4 p-1 lg:inline-block lg:mt-0 border-b-2 border-solid border-transparent hover:border-titleColor"
        >Search </router-link>
        <router-link
          to="aboutus"
          class="block mt-4 mr-4 p-1 lg:inline-block lg:mt-0 border-b-2 border-solid border-transparent hover:border-titleColor"
        >About us</router-link>
        <router-link
          to="/"
          class="block mt-4 mr-4 p-1 lg:inline-block lg:mt-0 border-b-2 border-solid border-transparent hover:border-titleColor"
        >Login </router-link>
        <router-link
          to="/"
          class="inline-block text-sm px-4 py-2 text-hover bg-titleColor  leading-none rounded border-transparent mt-4 lg:mt-0"
        >Account aanmaken</router-link>
      </div>
    </div>

When I go back to the homepage coming from the second page, it works again on the home page.

1 Answers

Make sure you're returning an object on data() on page you're getting the error.

data(){
  return{
    // your data
  }
}

I was getting same error and took me some time until I realized I was missing the return {} wrapping my data. It was such obvious and basic that I wasn't looking there.

Related