Characters from Winnie-the-Pooh animation movie — https://flic.kr/p/34hvvj

How to configure Vue, Vuex and Apollo client

There are already many articles on how to setup GraphQL integration in Vue using Vue Apollo plugin.

What do we want to achieve

At the end we want to have something similar to the following snippet, which is actually Vuex working with Apollo client and feeding GraphQL queries from files.

Motivation

Using Vue Apollo plugin gives you free Webpack configuration for loaders, caching etc. My case was a little bit different so here is what I wanted to have

1. Use my own GraphQL API server instead of Apollo server,
2. Avoid generated boilerplate by Vue Apollo,
3. Load queries from *.gql files,
4. Have reasonably simple loader configuration for *.gql files,
5. Integrate GraphQL client in Vuex actions at the same time keep them as minimal as possible,
6. Define domain boundaries using Vuex modules.

Configuration

In src/apollo.js I used official guide to setup Apollo client and provider manually

And load it in main.js

Configure Webpack

What vue.config.js was desired for me. It allows to import queries from dedicated files, for example

import tokenAuth from './queries/login.gql'

Simpler and smaller configuration

Now lets look on Vue Apollo configuration

Long and boring configuration

More advanced configuration uses caching, multithreaded build feature for production mode, so you also might be interested to adopt it as well.

Use Apollo client in Vuex

So now you can just import GraphQL query and use Apollo client instance from Vuex actions.

If you are interested in Vue related topics you might want to subscribe to my Telegram channel https://t.me/FullTimeVue

Thanks!