title: How to access '$apollo' outside vue component?
body: <p>How to make apollo accessible outside vue component.</p>
  
  <p>I am verifying if the user exist and then allow the route to proceed further.</p>
  
  <pre class="lang-js prettyprint-override"><code>{
          path: '/:username',
          name: 'userProfilePage',
          component: userProfilePage,
          beforeEnter(routeTo, routeFrom, next) {
              userExist(routeTo.params.username)
              next()
          }
  </code></pre>
  
  <p>Passing the <code>username</code> as a parameter to the <code>userExist</code> function.</p>
  
  <pre class="lang-js prettyprint-override"><code>import gql from "graphql-tag"
  
  export default function userExist(username) {
      this.$apollo
          .query({
              query: gql`
          query($username: String!) {
              login(username: $username) {
                  username
                  email
              }
          }
      `,
              variables: {
                  username: username
              }
          })
          .then(res =&gt; {
              console.log(res);
              return res
          })
          .catch(err =&gt; {
              console.log(err);
              return err
          });
  }
  </code></pre>
  
  <p>But it is outputting the error:</p>
  
  <p><a href="https://i.stack.imgur.com/532Tn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/532Tn.png" alt="enter image description here"></a></p>
  
  <p>Apollo client code</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App.vue'
  import VueApollo from 'vue-apollo';
  import { ApolloClient } from 'apollo-client'
  import { HttpLink } from 'apollo-link-http'
  import { InMemoryCache } from 'apollo-cache-inmemory'
  import router from './routes.js'
  
  Vue.config.productionTip = false
  
  const httpLink = new HttpLink({
      uri: process.env.VUE_APP_DB_URL,
  })
  
  const cache = new InMemoryCache()
  
  const apolloClient = new ApolloClient({
      link: httpLink,
      cache
  })
  
  Vue.use(VueApollo)
  
  const apolloProvider = new VueApollo({
      defaultClient: apolloClient,
  })
  
  new Vue({
      render: h =&gt; h(App),
      router,
      apolloProvider
  }).$mount('#app')
  </code></pre>