@metalsadman thank you for the reply, I just found out about that

@muzammil_76 wanted to know this as well

@rhscjohn Thank you very much, I used your code as a reference and now it works, my boot file stays the same but my action file is now like this:

import { apolloProvider } from "../../boot/apollo";
import gql from "graphql-tag";

const gqlClient = apolloProvider.defaultClient;

export function getLoggedInUserInfo({ commit }, payload) {
  gqlClient
    .query({
      query: gql`
        query getUserByTokenList($token: String!) {
          getUserByToken(token: $token) {
            email
            firstname
            lastname
            bio
            note
            role
            coach
            club
            organization
            position
            players
          }
        }
      `,
      variables: {
        token: payload
      }
    })
    .then(data => {
      commit("updateUser", data.data.getUserByToken);
    });
}

@dobbel said in Import GraphQL boot file to use in store action:

@tranmani said in Import GraphQL boot file to use in store action:

console

What is the output of console.log(apolloProvider) in the not store compared to the output in a vue file?

console log for actions file:

actions.js?439d:5 
ApolloProvider {clients: {…}, defaultClient: ApolloClient, defaultOptions: undefined, watchLoading: undefined, errorHandler: ƒ, …}
->
clients: {defaultClient: ApolloClient}
defaultClient: ApolloClient {defaultOptions: {…}, resetStoreCallbacks: Array(0), clearStoreCallbacks: Array(0), link: WebSocketLink, cache: InMemoryCache, …}
defaultOptions: undefined
errorHandler: errorHandler({ graphQLErrors, networkError }) { if (graphQLErrors) { graphQLErrors.map(({ message, locations, path }) => {…}
prefetch: undefined
watchLoading: undefined
__proto__: Object

console log of this.$apollo in .vue file

DollarApollo {_apolloSubscriptions: Array(0), _watchers: Array(0), vm: VueComponent, queries: {…}, subscriptions: {…}, …}
->
client: undefined
error: undefined
loadingKey: undefined
queries: {}
subscriptions: {}
vm: VueComponent {_uid: 59, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_apolloSubscriptions: []
_watchers: []
data: (...)
loading: (...)
provider: (...)
__proto__: Object

@anli said in Import GraphQL boot file to use in store action:

Do you really need vuex? vue-apollo comes with a caching system and using vuex is not needed and may be overhead. If you use chrome browser you can add the apollo extension to watch the cache. You can read https://apollo.vuejs.org/guide/local-state.html to find out more (att: v3 documentation, maybe you’re using one of the three v4 apis (Option API, Composition API, Component API) - setup is nearly the same (https://v4.apollo.vuejs.org/))

I will have a look in to that

Hi, I am using GraphQL, in Vue component it works fine with this.$apollo but I can’t find a way to use it in non vue component file.

Boot file:

const apolloProvider = createApolloClient();
export default ({ app, Vue, ssrContext }) => {
  Vue.use(VueApollo);
  app.provide = { $apolloProvider: apolloProvider };

  if (ssrContext) {
    ssrContext.rendered = () => {
      ssrContext.apolloState = JSON.stringify(
        apolloProvider.defaultClient.extract()
      );
    };
  }
  return apolloProvider;
};

export { apolloProvider };

Store action:

import LoginRes from "../../graphql/login";
import { apolloProvider } from "../../boot/apollo";

export function getLoggedInUserInfo({ commit, payload }) {
  console.log(apolloProvider);
  apolloProvider
    .query({
      query: LoginRes.getUserByToken,
      variables: {
        token: payload
      }
    })
    .then(data => {
      commit("updateUser", data.data.getUserByToken);
    });
}

Error in console:

client-entry.js?2f39:105 
[Quasar] boot error: TypeError: _boot_apollo__WEBPACK_IMPORTED_MODULE_1__.apolloProvider.query is not a function
    at Store.getLoggedInUserInfo (actions.js?439d:6)
    at Array.wrappedActionHandler (vuex.esm.js?94e4:847)
    at Store.dispatch (vuex.esm.js?94e4:512)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?94e4:402)
    at Array.__webpack_exports__.default (apollo.js?c149:72)
    at start (client-entry.js?2f39:88)

I would like to have an option :width="" and :heigh="" too