re: Apollo state management in Vue application VIEW POST

re: I love this post! one thing I would love to do is abstract away the fact that we have a Apollo Mutation from the components. I'm not sure if it's ...

You can do it outside of the components and without VueApollo :) In fact, VueApollo works as a Vue wrapper for Apollo Client, but it doesn't mean you can't use the client directly:

First, you will need to export your client when creating it:

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

Then, you can import it anywhere in the service/util/helper and use it:

import { apolloClient } from './index';

  variables: { text: "hello" },
  mutation: myMutation,
.then(result => { console.log(result) })
.catch(error => { console.log(error) });

Such an awesome response - I just did something similar but I needed to be able to mock in test so I have a service that looks like this

export default class AlertService {
  constructor(private client: ApolloClient<InMemoryCache>) {
    this.client = client;
  // ...

Then I inject the real client on Vue.js startup

  Vue.prototype.$alertService = new AlertService(apolloProvider.defaultClient);

Then in a test I can inject a mock.

Awesome mock! I'm happy the reply was useful :)

code of conduct - report abuse