How do I return an Array from asyncData in nuxt from firestore for SSR?

Question

I am attempting to get my app to render my data in an array from Firestore in SSR using asyncData. My function outside of asyncData is working fine but I can NOT get it to work inside.

I have tried so many ways of getting the array from asyncData to render. I trying to return the data onto 'addons' so it fills out the form the same way my method does.

Here is my working method

async getAddons() {
      var addonsRef = db
        .collection('addons')
        .where('publish', '==', true)
        .orderBy('timeUpdated', 'desc');
      await addonsRef.get().then(snapshot => {
        snapshot.forEach(doc => {
          const addons = {
            ...doc.data(),
            id: doc.id
          };
          return this.addons.push(addons);
        });
      });
    },

And here is the code I am currently trying inside asyncData

async asyncData({ app, error }) {
    const addonsRef = await db
      .collection('addons')
      .where('publish', '==', true)
      .orderBy('timeUpdated', 'desc');
    try {
      await addonsRef.get().then(snapshot => {
        snapshot.forEach(doc => {
          const addons = {
            ...doc.data(),
            id: doc.id
          };
          return app.addons.push(addons);
        });
      });
    } catch (e) {
      // TODO: error handling
      console.error(e);
    }
    return app.addons.push(addons);
  },

I expect the asyncData code to populate the array so it fills out my template the same as the getAddons function.

What simple thing am I missing?

What result of app.addons.push(addons) and how u reference it in tempalte — Aldarund
– Aldarund, Commented May 8, 2019 at 19:37
I am getting an empty array according to a console.log The template is using {{addon.name}} and such. — Mike Norton
– Mike Norton, Commented May 8, 2019 at 19:44
so thats the problem. u are getting empty array. asyncDAta will be executed on server on initial page load — Aldarund
– Aldarund, Commented May 8, 2019 at 20:08
That's not a problem, that is what is expected. But is should be returning data that will prerender. I already have it working on view pages that do a single call and not ask for a collection. — Mike Norton
– Mike Norton, Commented May 8, 2019 at 20:20
Turns out the problem was user error. I was trying to use asyncData inside a component and not on a page. arg. Thanks for the help @aldarund — Mike Norton
– Mike Norton, Commented May 9, 2019 at 2:39

Aldarund · Accepted Answer · 2019-05-08 20:25:50Z

1

you should return dictionary from asyncData. E.g.

{
 something:  app.addons.push(addons)
}

And then in template you access it via {{something. }}

answered May 8, 2019 at 20:25

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Norton Over a year ago

Tried that and I am still not getting anything back.

Collectives™ on Stack Overflow

How do I return an Array from asyncData in nuxt from firestore for SSR?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related