re: Apollo state management in Vue application VIEW POST


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 realistic but I was thinking of the situation where you have a snackbar or toasts. You could have local state with Vue-Apollo but I want to create an interface to my AlertService that doesn't expose VueApollo.

I feel like I am rambling like a madman, but, have you ever tried to hideaway any of your Apollo logic?


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