Apollo request from Vuex - vuejs2

Question

Can anyone tell me from where I can import apolloClient so that I can make requests to apollo?
I usually get an error either mutate is not a function (even if I pass in this.$apollo from a Vue component)
I am just trying to get into the way of things in Vue. If any hints on code and structure I would appreciate that
signIn component
<template>
<div class="signIn-component">
<form #submit.prevent="signInUser()">
<input
type="email"
placeholder="Enter your email"
v-model="formInput.email"
/>
<input
type="password"
placeholder="Enter your password"
v-model="formInput.password"
/>
<button>Sign In</button>
</form>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("auth");
export default {
data() {
return {
formInput: {
email: null,
password: null
}
};
},
methods: {
// Vuex Actions
...mapActions(["signIn"]),
signInUser: function() {
// eslint-disable-next-line no-unused-vars
this.signIn(this.formInput, this.$apollo).then(_ =>
this.$route.push("/")
);
}
}
};
</script>
<style></style>
Vuex.auth
import { apolloClient } from 'vue-cli-plugin-apollo/graphql-client';
import SignInGQL from "#/graphql/signIn.gql";
export default {
namespaced: true,
state: {
token: null,
user: {},
authStatus: false
},
getters: {
isAuthenticated: state => !!state.token,
authStatus: state => state.authStatus,
user: state => state.user
},
actions: {
async signIn({ commit, dispatch }, formInput) {
console.log('here');
try {
const { data } = await apollo.mutate({
mutation: SignInGQL,
variables: { ...formInput }
})
const { token } = data.signIn;
console.log(token);
commit('setToken', token);
localStorage.setItem('auth-token', token);
dispatch('setUser', token);
} catch (e) {
console.error(e)
}
},
setUser({ commit }, token) {
const encodedPayload = token.split('.')[1];
const { payload } = JSON.parse(atob(encodedPayload));
console.log('payload: ', payload);
// TODO: Set User information
commit('signInUser', payload);
}
},
mutations: {
setToken(state, token) {
state.token = token
},
signInUser(state, user) {
state.authStatus = true
state.user = { ...user }
},
// logOutUser(state) {
// state.authStatus = ''
// state.token = '' && localStorage.removeItem('auth-token')
// }
}
}

Answer 1

This question explains adding headers to apollo client
solution repo
import { setContext } from "apollo-link-context";
import { ApolloClient, InMemoryCache, HttpLink } from "apollo-boost";
import VueApollo from "vue-apollo";
Vue.use(VueApollo);
const httpLink = new HttpLink({
uri: "http://sebapi.com/graphql"
});
const authLink = setContext((_, { headers }) => {
// get the authentication token from ApplicationSettings if it exists
const token = ApplicationSettings.getString("token");
// return the headers to the context so HTTP link can read them
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : null
}
};
});
// update apollo client as below
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
});
const apolloProvider = new VueApollo({
defaultClient: apolloClient
});
and LOGIN.VUE
<script lang="ts">
export default {
data() {
return {
jwt: "",
user: {
identifier: "test",
password: "123123",
},
};
},
methods: {
handleLogin() {
request({
url: "http://sebapi.com/auth/local",
method: "POST",
headers: { "Content-Type": "application/json" },
content: JSON.stringify({
identifier: this.user.identifier,
password: this.user.password,
}),
})
.then(
(response) => {
const result = response.content.toJSON();
console.log("Result from Server: ", result);
//ignore applicationsettings it's just a kind of localstore in nativescript
ApplicationSettings.setString("token", result.jwt);
},
(e) => {
console.error(e);
//ignore nativateto its routing in nativescript
this.$navigateTo(routes.login);
}
)
.then(() => {
this.$navigateTo(routes.app);
});
},
},
};
</script>

Answer 2

This is how I did it, in case somebody is looking for the same answer:
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
// Install the vue plugin
Vue.use(VueApollo)
// Name of the localStorage item
const AUTH_TOKEN = 'auth-token'
// Http endpoint
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:3000/graphql';
// Config
const defaultOptions = {
// You can use `https` for secure connection (recommended in production)
httpEndpoint,
// You can use `wss` for secure connection (recommended in production)
// Use `null` to disable subscriptions
wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || null,
// wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:3000/graphql',
// LocalStorage token
tokenName: AUTH_TOKEN,
// Enable Automatic Query persisting with Apollo Engine
persisting: false,
// Use websockets for everything (no HTTP)
// You need to pass a `wsEndpoint` for this to work
websocketsOnly: false,
// Is being rendered on the server?
ssr: false,
// Override default apollo link
// note: don't override httpLink here, specify httpLink options in the
// httpLinkOptions property of defaultOptions.
// httpLinkOptions: {
// headers: {
// Authorization: authHeader
// }
// }
// Override default cache
// cache: myCache
// Override the way the Authorization header is set
// getAuth: (tokenName) => getUserToken(),
// Additional ApolloClient options
// apollo: { ... }
// Client local data (see apollo-link-state)
// clientState: { resolvers: { ... }, defaults: { ... } }
}
export const { apolloClient, wsClient } = createApolloClient({
...defaultOptions,
// ...options,
})
// Call this in the Vue app file
export function createProvider() {
// Create apollo client
apolloClient.wsClient = wsClient
// Create vue apollo provider
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$query: {
fetchPolicy: 'cache-and-network',
},
},
errorHandler(error) {
// eslint-disable-next-line no-console
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
},
})
return apolloProvider
}
This is the source I found the solution
If you have any recommendations, feel free to leave them here, please!