how to get context and env variables in asyncData nuxtjs

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

this node package will surely help npmjs.com/package/nuxt-env — Jalasem
– Jalasem, Commented Feb 17, 2019 at 2:47

Alexander Staroselsky · Accepted Answer · 2019-02-07 03:47:13Z

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!

Collectives™ on Stack Overflow

how to get context and env variables in asyncData nuxtjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related