How to resolve Apollo error 401 accessing DatoCMS - vuejs2

Question

I followed this guide:
https://medium.com/#marcmintel/quickly-develop-static-websites-with-vuejs-a-headless-cms-and-graphql-bf64e75910d6
but when I run npm run dev I get error 401 on my localhost:3000
this is my nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'hello-world',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
modules: [
'#nuxtjs/apollo',
],
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'https://graphql.datocms.com',
getAuth: () => 'Bearer XXXXXXXXXXXXX' //my apikey
}
}
}
}
And this is the vue file performing the query. I'm currently displaying nothing in the page but I still get the error.
<template>
<div>
All blog posts
</div>
</template>
<script>
import gql from 'graphql-tag'
export default {
apollo: {
allPosts: gql`{
allPosts{
title,
text,
slug
}
}`
}
}
</script>
The post data type is correctly defined in DatoCMS, I tested it with the API Explorer

Answer 1

Found the solution in the comments of the article.
You need to put your auth in a separate file like this and format it as follows:
~/apollo/config.js
export default function(context){
return {
httpEndpoint: ‘https://graphql.datocms.com',
getAuth:() => ‘my-token’ //Bearer is added by default
}
}
Then in nuxt.config.js
apollo:
apollo: {
clientConfigs: {
default: ‘~/apollo/config.js’
}
}