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.