How to pass the Header while calling the Apollo Query?

Question

I'm trying to pass the token inside the header while calling the apollo query for graphql inside the vue application. But this is not working. I don't want to add header inside the main.js as we need to store it inside the localstorage of the browser. I searched and got to know that we can do like this. What I am doing wrong here ? this.$apollo.query( {
query: gql query getuser { Username { Username }},

               variables: {
                },
                    context:{
                        header:{
                            Authorization: this.token ? `Bearer ${this.token}` : ''
                      
                        },
                                                  },
  }).then((data) => {

      alert("Inside  Query...");

      }
        */
    }).catch((error) => {
      console.error('error in creating order: ', error);
      alert('error in creating order: ' + error);
  });

},

Answer 1

How about changing header to headers?

context: {
    headers: { // Instead of header
        Authorization: this.token ? `Bearer ${this.token}` : ''
    },
},