how to get context and env variables in asyncData nuxtjs - vue.js

Question

I'm creating a blog in my nuxt-app that pulls data from contentful ive been following this tutorial, now I can get that all right, but I cant seem to get both context and the environment variables I set up to return from the asyncData argument
I have created a json file like so..
.contentful.json
{
"CTF_BLOG_POST_ITEM": "...",
"CTF_BLOG_POST": "...",
"CTF_SPACE_ID": "...",
"CTF_CDA_ACCESS_TOKEN":"..."
}
and then in my nuxt.config.js
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_BLOG_POST_ITEM: config.CTF_BLOG_POST_ITEM,
CTF_BLOG_POST: config.CTF_BLOG_POST
}
now basically in my component I've been trying to do this
asyncData(context, {env}) {
return Promise.all([
client.getEntries({
'content_type': env.CTF_BLOG_POST_ITEM,
order: '-sys.createdAt'
})
]).then(([posts]) => {
console.log(context);
return {
posts: posts.items
}
})
},
but when I run this I get cannot read property CTF_BLOG_POST_ITEM of undefined, if I take context out of the arguments this works, and vice versa if I take the {env} I get the context.
How can I get both??
Thanks

Answer 1

The primary (1st) argument of asyncData() is the context object. env is a property of the context object. You could access it as context.env without the use of object restructuring assignment. Your example could be rewritten in the following way without the use of object restructuring assignment:
asyncData(context) {
return Promise.all([
client.getEntries({
'content_type': context.env.CTF_BLOG_POST_ITEM,
order: '-sys.createdAt'
})
]).then(([posts]) => {
console.log(context);
console.log(context.env);
return {
posts: posts.items
}
})
},
The signature asyncData(context, {env}) { is incorrect because you are adding a second argument, {env}, which does not reference the aforementioned context object in any way. If you only need env from context, you can use object restructuring assignment to extract this property in the following way (as you mentioned works when you remove the 1st argument:
asyncData({env}) {
return Promise.all([
client.getEntries({
'content_type': context.env.CTF_BLOG_POST_ITEM,
order: '-sys.createdAt'
})
]).then(([posts]) => {
console.log(context);
console.log(context.env);
return {
posts: posts.items
}
})
},
If you need additional context object properties, using object destructuring assignment. Tt would look like:
asyncData({env, params, req, res}) {
Otherwise, you can just access properties such as context.env, context.params, etc by simply passing context as the first/primary argument with restructuring.
Hopefully that helps!