NuxtJS Apollo module TypeError: Cannot read property '$apolloHelpers' of undefined

Question

I am building a simple NuxtJS app that consume a GraphQL endpoint using NuxtJS Apollo module. I am currently building the authentication part of the app. I wanted to use apolloHelpers.onLogin() function to set the auth header in cookie and invoke GraphQL requests with that JWT header.

I am having the following error message:

This is my apollo section of my nuxt.config.js

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: process.env.HTTP_ENDPOINT,
        wsEndpoint: process.env.WS_ENDPOINT
      },
    },
  },

This is my pages/login.vue page

  <div>
    <button @click="googleLogin">Login with Google</button>
    <div v-if="$auth.isAuthenticated">
      {{ $auth.user }}
      <button @click="logout">Logout</button>
      <nuxt-link to="/messages">Messages</nuxt-link>
    </div>
  </div>
</template>


<script>
import firebase from "firebase";

export default {
  methods: {
    async googleLogin(user) {
      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("profile");
      provider.addScope("email");
      await this.$fireAuth.signInWithPopup(provider).then(function (result) {
        var user = result.user;
        console.log(user)
        this.$apolloHelpers.onLogin(user.xa)
      });
    },
    async logout() {
      this.$fireAuth.signOut();
      await this.$apolloHelpers.onLogout() 
    },
  },
};
</script>

How do I use this.$apolloHelpers.onLogin() function correctly in my code to set the Authorization header when invoking GraphQL requests?

Answer 1

Consider using this code in the googleLogin method.

async googleLogin(user) {
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope("profile");
  provider.addScope("email");
  let temp = this;
  await this.$fireAuth.signInWithPopup(provider).then(function (result) {
    var user = result.user;
    console.log(user)
    temp.$apolloHelpers.onLogin(user.xa)
  });
},

Answer 2

I somehow fixed the error like this

    async googleLogin(user) {
      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("profile");
      provider.addScope("email");
      try {
        var token
        await this.$fireAuth.signInWithPopup(provider).then(function (result) {
          var user = result.user;
          token = user.xa
          console.log(user);
        });
        await this.$apolloHelpers.onLogin(token, undefined, { expires: 7 });
      } catch (e) {
        console.error(e);
      }
    },

Answer 3

add in nuxt.config.js

 modules: [
    '@nuxtjs/apollo',
]
apollo:{
  clientConfigs: {
      default: '@/plugins/apollo-config.js',
    },
}

inside apollo-config file

export default function(){
    return{
        httpEndpoint: process.env.NUXT_ENV_GRAPHQL_ENDPOINT,
        // authenticationType: 'Bearer', 

    }
}

like this