$apollo is undefined

[lsca94]

So I am trying to solve this problem for over a day now. I can't get vue-apollo to work. The helper $apollo is always undefined. I am trying to use this.$apollo in a vue method but it is undefined. The only similar issue I found on here was #276 but it is still open.

How to reproduce

My main.js file:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import apolloProvider from './utils/apolloClient'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

My /utils/apolloClient file

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from "apollo-link-context"
import VueApollo from 'vue-apollo'
import { auth } from './authentication'

const httpLink = createHttpLink({
  uri: process.env.VUE_APP_GRAPHQL_URI
})

const authToken = setContext((_, {headers}) => {
  var token = ""

  if (auth.currentUser) {
    token = auth.currentUser.getIdToken()
  } 

  return {
    headers: {
      ...headers,
        Bearer: token, 
    }
  }
})

const apolloClient = new ApolloClient({
  link: authToken.concat(httpLink),
  cache: new InMemoryCache(),
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

export default apolloProvider

My App.vue file

<template>
  <div id="app">
    <button v-on:click="register()">Register</button>
    <router-view/>
  </div>
</template>

<script>

export default {
  methods: {
    register: function() {
        this.$apollo.mutate(
            //Do something
        )
    },
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now if I click on the Register button, I get the following error:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'mutation' of undefined"

found in

---> <Anonymous>
       <Root>

Versions

vue: 2.6.11 vue-apollo: 3.0.5 apollo-client: 2.6.10

Expected behavior

That I get the $apollo helper when I call this.$apollo

[davidboom95]

+1

[justin-faredrop]

+1. I'm using Vue in .js files rather than .vue files. I'm wondering if it has something do with needing the Vue compilier?