CSRF token gets passed in the header when performing POST

I'm setting up VueJS SPA on top of Django. I have Graphene endpoint running on /api and queries in graphiql run fine. I have set up frontend and I'm using Apollo Client to query server. There goes my setup:

const CSRFtoken = Cookies.get('csrftoken')

const networkInterface = createNetworkInterface({
  uri: '/api',
  transportBatching: true
})

networkInterface.use([{
  applyMiddleware (req, next) {
    if (!req.options.headers) {
      req.options.headers = {}  // Create the header object if needed.
    }
    req.options.headers['X-CSRFToken'] = CSRFtoken
    console.log('applied middleware')
    next()
  }
}])

const apolloClient = new ApolloClient({
  networkInterface,
  connectToDevTools: true
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

new Vue({
  el: '#app',
  apolloProvider,
  render: h => h(App)
});

My POST requests have the 'X-CSRFToken' header with value provided by Cookies. Screenshot below:

Unfortunately Django forbids access (error 403) with message: "CSRF cookie missing".

I have searched through the web but can't find anything related.

Thanks in advance!