this.$apollo always undefined - django

Question

I'm trying to use apollo (+ vue, django) but for some reason it won't get loaded/used in a component,this.$apollo is always undefined.
<script>
import { GET_ALL_USERS_QUERY } from '../js/graphql/queries/userQueries.js'
export default {
name: 'GraphQLTest',
data() {
return {
users: [],
loading: true
}
},
async mounted() {
this.loading = true
this.users = await this.$apollo.query({
query: GET_ALL_USERS_QUERY
})
this.loading = false
}
}
</script>
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'query' of undefined"
main.js
import Vue from 'vue'
import { router } from './routes.js'
import store from './store.js'
import { createProvider } from './apollo.js'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
router,
store,
provide: createProvider(),
render: h => h(App),
}).$mount('#app')
apollo.js
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
// Install the vue plugin
Vue.use(VueApollo)
// Name of the localStorage item
const AUTH_TOKEN = 'jwt-token'
// Config
const defaultOptions = {
httpEndpoint: '/graphql',
wsEndpoint: null,
tokenName: AUTH_TOKEN,
persisting: false,
websocketsOnly: false,
ssr: false
}
// Call this in the Vue app file
export function createProvider (options = {}) {
// Create apollo client
const { apolloClient, wsClient } = createApolloClient({
...defaultOptions,
...options
})
apolloClient.wsClient = wsClient
// Create vue apollo provider
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$query: {
loadingKey: 'loading',
fetchPolicy: 'cache-and-network'
}
},
errorHandler (error) {
// eslint-disable-next-line no-console
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
}
})
return apolloProvider
}
// Manually call this when user log in
export async function onLogin (apolloClient, token) {
localStorage.setItem(AUTH_TOKEN, token)
if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
try {
await apolloClient.resetStore()
} catch (e) {
// eslint-disable-next-line no-console
console.log('%cError on cache reset (login)', 'color: orange;', e.message)
}
}
// Manually call this when user log out
export async function onLogout (apolloClient) {
localStorage.removeItem(AUTH_TOKEN)
if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
try {
await apolloClient.resetStore()
} catch (e) {
// eslint-disable-next-line no-console
console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
}
}
Why is apollo never loaded? something missing in the config?
[edit: same thing happens when following the tutorial : ]
import Vue from "vue"
import App from "./App.vue"
import { router } from './routes.js'
import ApolloClient from "apollo-boost"
import VueApollo from "vue-apollo"
const apolloProvider = new VueApollo({
defaultClient: new ApolloClient({
uri: "http://localhost:8000/graphql/"
})
})
Vue.use(VueApollo)
new Vue({
router,
el: "#app",
provide: apolloProvider.provide(),
render: h => h(App)
})

Answer 1

if you created your VUE project using vue-cli > 3 this will cause the issue with this.$apollo equal to undefined.