Apollo request from Vuex

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')
        // }
    }
}

Cem Kaan · Accepted Answer · 2020-04-16 05:13:49Z

2

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>

answered Apr 16, 2020 at 5:13

Cem Kaan

2,2743 gold badges33 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Valary o Over a year ago

By default Vue-Apollo file exports the function “createProvider” (if you use cli version of Vue Apollo). And “createApolloClient” which holds ApolloClient was declared inside of “createRrovider”. I moved createApolloClient outside of CreateProvider, exported it there and then imported it in my store file. Headers are implemented under the hood by default there. I just simply added the name of the localStorage file where I keep my token. I had troubles with using Apollo within my Vuex Storage. I didn’t want to patch my own implementation since I use Vue-Apollo

Valary o Over a year ago

Do you use another router not the Vue build-in one? I’ve noticed “this.$navigateTo”. Or you just globally assigned own service for navigation? I’m new to this framework - a lot of question on practice and experience

Cem Kaan Over a year ago

@Valaryo it's just alternative way of navigating in nativescript-vue Manual routing

Valary o Over a year ago

I got you. Thanks!

Cem Kaan · Accepted Answer · 2020-04-16 21:45:58Z

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!

Collectives™ on Stack Overflow

Apollo request from Vuex

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related