Skip to content

Can't run mutations #996

Open
Open
@michaelLoeffelmann

Description

@michaelLoeffelmann

Describe the bug
When i try to call following code in my method, i'll get an error:

TypeError: undefined is not an object (evaluating 'this.provider.defaultClient')"

To Reproduce
Calling this snippet of code in one method of my components:

this.$apollo.mutate({
    mutation: TOGGLE_LIKE,
    variables: {
        postId,
    },
})
.then((result) => {
    this.waitingForLike = false;
})
.catch((error) => {
    console.log(error);
})

My main.js looks like this:

import Vue from 'nativescript-vue'
import App from './App';

import store from './store'
import apolloProvider from './vendors/vue-apollo';

new Vue({
  store,
  apolloProvider,
  template: `
        <App />
    `,
  components: {
    App
  }
}).$start();

vue-apollo.js

import Vue from 'nativescript-vue';
import VueApollo from 'vue-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from  'apollo-cache-inmemory';
import { onError } from 'apollo-link-error';
import { setContext } from 'apollo-link-context';

import store from '../store';

const httpEndpoint = (() => store.getters['application/graphHttp']);

const httpLink = createHttpLink({
    uri: httpEndpoint
});

const authMiddleware = setContext(async (_, { headers }) => {
    let token = null;

    await store.dispatch('auth/getToken')
        .then((accessToken) => {
            token = accessToken;
        })
        .catch((error) => {
            console.error('error getting token from vuex store');
        });

    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : '',
            'X-APP-VERSION': global.APP_VERSION,
            'X-APP-TOKEN': global.VUE_APP_X_TOKEN,
        },
    };
});

const errorMiddleware = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
        if (graphQLErrors[0].message === 'in maintenance') {
            console.error('application in maintenance mode');
        }
    } else if (networkError) {
        console.error('network error detected');
    }
})

const defaultOptions =  {
    link: errorMiddleware.concat(authMiddleware.concat(httpLink)),
    persisting: false,
    websocketsOnly: false,
    ssr: false,
    cache: new InMemoryCache(),
    defaultHttpLink: false,
}

const apolloClient = new ApolloClient({
    ...defaultOptions
});

Vue.use(VueApollo);

const apolloProvider = new VueApollo({
    defaultClient: apolloClient
});

export default apolloProvider;


export function getApolloClient() {
    return apolloClient;
}

Expected behavior
I want to run this mutation.

Versions
vue: 2.6.11
vue-apollo: 3.0.3
apollo-client: 2.6.10

Additional context
I use this in combination with nativescript-vue version 2.6.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions