Discussion on: 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?

Natalia Tepluhina • Jan 6 '20

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';

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

Jacob Janisz • Mar 4 '21

How does it work with reactivity? Is the data still reactive if I use it with legacy ApolloClient e.x. for updating local state?

Austin Vance • Jan 6 '20

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.

Natalia Tepluhina • Jan 6 '20

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