Graphqlwithapolloclient
Published: 2020-03-04 14:56:02

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

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

found in

---> <CreateAuthor> at src/components/Admin/Author.vue
       <App> at src/App.vue
         <Root>


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), <anonymous>: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)
</pre>
<pre>
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);

</pre>

<pre>
Author.vue

<template>
    <section class="section">
        <div class="columns">
            <div class="column is-4 is-offset-4">
                <h2 class="title has-text-centered">Create Author</h2>

                <form method="POST" @submit.prevent="createAuthor">
                    <div class="field">
                        <label class="label">Name</label>

                        <p class="control">
                            <input
                                type="text"
                                class="input"
                                v-model="name">
                        </p>
                    </div>

                    <div class="field">
                        <label class="label">Age</label>

                        <p class="control">
                            <input
                                type="number"
                                class="input"
                                v-model="age">
                        </p>
                    </div>

                    
                    <p class="control">
                        <button class="button is-primary is-fullwidth is-uppercase">Create</button>
                    </p>
                </form>
            </div>
        </div>
    </section>
</template>

<script>

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')
                })
            }
        }
    }
</script>
</pre>
<pre>
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
        }
    }`</pre>