ApolloClient not accessible from route and boot about app-extension-apollo HOT 6 CLOSED

In my current project we're using both Vuex (with the Vuex-Pathify plugin, which has been a huge game-changer) and ApolloClient and I had a similar question.

In case anyone comes across this and needs to know how to access the ApolloClient from an external file (e.g. another .js file), here's what I did after asking around in the Quasar Discord.

(Here's the direct link to the answer I got in Discord).

In your apollo-client-hooks.js file (in src/plugins/quasar-app-extension-apollo), you can export the apolloClient object from the apolloClientAfterCreate function.

Here's what mine looks like:

// src/plugins/quasar-app-extension-apollo/apollo-client-hooks.js

let apollo = {}

export function apolloClientBeforeCreate () {}

export function apolloClientAfterCreate ({ apolloClient }) {
  apollo = apolloClient
}

export { apollo }

Now the client is accessible from wherever it needs to be called.

For example, I make GraphQL mutations in some of the actions in my Vuex store.

// store/some-store-module.js

import { apollo } from '@/quasar-app-extension-apollo/apollo-client-hooks'

const actions = {
  onCreate ({ dispatch }, { myMutation, myVariables }) {
    apollo.mutate({
      mutation:  myMutation,
      variables: myVariables
    })
  }
}

Hopefully this helps anyone else who needs it!

from app-extension-apollo.

On which stage would you replace Vuex by ApolloClient? By design it's possible to replace store inside the store/index.js, place there initialization of the apollo client. This kind of change is very limited to the SSR mode, as inside the store you are not able to access to the ssrContext, which is serious limitation for me. That's the only one point I found how you could replace vuex store by apollo client. It's not possible to change it on the next steps, for example inside the boot files.
Lets discuss of the possible solutions to the 1 way.

I've implemented second solution without any modifications in the latest quasar with boot file. If you have any problems with this implementation - just let me know. It also works with SSR mode as well. So I have two stores at the same time, but I don't use vuex as I found it's better to have one storage solution in the app, it's much easier to apollo cache, though it's still premature (not as easier as working with vuex in some cases).

from app-extension-apollo.

Closing as old.

Scott

from app-extension-apollo.

@smolinari hopefully that will be fixed as well in the newer versions.

from app-extension-apollo.

Try it out and see. The way it works now and IMHO, you should use Apollo for global state management. You'll also need to take the paradigm of the Flux pattern with Vuex and change it a bit to components that need only the data they need and changing only the data they need to change, making data a forth clear concern within components. So, nothing more about wanting some call to get data via the router. That shouldn't be necessary any more. But, let's see. We can always change and improve as we move forward. 😃

Scott

from app-extension-apollo.

Has anyone else able to use multiple clients with this client hooks?
https://apollo.vuejs.org/guide/multiple-clients.html

I managed to set up the apollo-provider-hook to return multiple clients and that works great.
However, I'm not able to set up multiple clients with the apollo-client-hooks.

from app-extension-apollo.