Graphqlwithapolloclient

Hi, I'm new to Vue Js. trying to integrate graphql with apollo client. always getting below error

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

found in

--->  at src/components/Admin/Author.vue
        at src/App.vue
         


TypeError: Cannot read property 'defaultClient' of undefined
    at DollarApollo.getClient (vue-apollo.esm.js?522d:1235)
    at DollarApollo.mutate (vue-apollo.esm.js?522d:1273)
    at VueComponent.createAuthor (Author.vue?2edc:54)
    at submit (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"46563e88-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Admin/Author.vue?vue&type=template&id=ab0469ca& (app.js:933), :21:28)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLFormElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLFormElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

main.js

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 VueRouter from 'vue-router';

import SignUp from '@/components/Admin/SignUp'
import Login from '@/components/Admin/Login'
import Author from '@/components/Admin/Author'


Vue.use(VueRouter);

Vue.config.productionTip = false
const getHeaders = () => {
  const headers = {};
  const token = window.localStorage.getItem('apollo-token');
  if (token) {
    headers.authorization = `Bearer ${token}`;
  }
  return headers;
};
// Create an http link:
const link = new HttpLink({
  uri: 'http://localhost:8080/apis/graphql',
  fetch,
  headers: getHeaders()
});
export const client = new ApolloClient({
  link: link,
  cache: new InMemoryCache({
    addTypename: true
  })
});

export const apolloProvider = new VueApollo({
  defaultClient: client,
});


const router = new VueRouter({
  routes: [
    { path: '/signup', name: 'SignUp', component: SignUp },
    { path: '/login', name: 'Login', component: Login },
    { path: '/createAuthor', name: 'createAuthor', component: Author }
  ]
})

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

Vue.use(VueApollo);

Author.vue


    
        
            
                
Create Author

                
                    
                        Name

                        
                    

                    
                        Age

                        
                    

                    
                    

                        Create
                    
                
            
        
    




import { CREATEAUTHOR_MUTATION } from '@/graphql'

export default {
    name: 'createAuthor',
    data () {
        return {
            name: '',
            age: ''
        }
    },
    methods: {
        createAuthor () {
            this.$apollo
                .mutate({
                    mutation: CREATEAUTHOR_MUTATION,
                    variables: {
                        name: this.name,
                        age: this.age
                    }
                })
                .then(response => {
                    console.log(response);
                    // redirect to login page
                    this.$router.replace('/login')
                })
            }
        }
    }

src/graphql.js 


import gql from 'graphql-tag'
export const CREATEAUTHOR_MUTATION = gql`mutation CREATEAUTHORMutation($name: String!, $age: Integer!) {
    createAuthor(
            name: $name,
            age: $age
        ) {
            id
            name
        }
    }`