Awaiting to get data

help
1

I have a collection MyCollection which has documents with a title property and I want - in a component - to get the title for an id which the component got in a property and I keep getting errors on these attempts.

import { Promise } from 'meteor/promise';
meteor: {
  getTitle () {
    const node = Promise.await(MyCollection.findOne({_id: this.id})) ;
     return node.title;
  }
}

gives the error Promise.await is not a function.

When I use

meteor: {
        async getTitle () {
            const node = await MyCollection.findOne({_id: this.id}) ;
            return node.title;
        },
}

it gets the correct title but gives the error in promise “Cannot read property ‘title’ of undefined” and returns an object Promise instead of the title.
How can I make sure - without throwing errors - that all needed data are available before the component gets rendered?

2

#1 Meteor collection functions are sync so no need to await

#2 What is this.id and have you checked its value?

#3 what front-end framework are you using?

3

I am using Vue for the front end with vuetify for the parent component. The parameter id is extracted from the page URL with routes and passed to the component as a property.
When I change the code to

meteor: {
        getTitle () {
            console.log(this.id);
            const node = MyCollection.findOne({_id: this.id}) ;
            console.log(node.title);
            return node.title;
        },
}

the console shows that on page reload the method is called 3 times - each time the id parameter is correct but the first 2 times it shows the error Cannot read property ‘title’ of undefined. The 3rd time the title is retrieved and shown.
The parent component has in it’s data

currentId: this.$route.params.id,

The component is called in the parent component as

<my-component :key="currentId" :id="currentId"></my-component>

within a

<div v-if="currentId">

I observe that on page reload the parent component first renders as if it doesn’t get it’s data from the collection and then automatically re-renders showing the correct data - but without throwing an error.

4

Do you have a pub-sub for MyCollection? Or are you publishing everything to the client? Are you using auto-publish and insecure packages?

I do not query directly from the client and instead use methods to get the data from the server.

5

I use neither autopublish nor insecure. I explicitely publish these data to all and I have methods to insert, update and delete items in the collection but not for finding.

6

The reason why the data returns null initially because on startup, the subscriptions are empty.

You need to use Meteor’s Tracker to reactively update your UI once the data for the subscriptions are ready

7

I already have in /client/main.js

import VueMeteorTracker from 'vue-meteor-tracker';

Vue.use(VueMeteorTracker);
8

I am not familiar how it is done with Vue but your queries must be inside a tracker compute function. But nevertheless, the explanation to why you are seeing an empty result initially is as I have posted above

9

Yes, and therefore my question was

How can I make sure - without throwing errors - that all needed data are available before the component gets rendered?

10

Check how tracker and reactivity works

11

I noted (in a re-structured version of my code to avoid effects from router) that the error occurs in particular when the user clicks the reload button of the Chrome browser. Then the Meteor client seems to loose the connection to the database for a short time.
How can this be avoided?

12

There is no way to avoid it. Reload will result for meteor to start again and thus lose all data in minimongo. You need a way to consider that subscription takes time to populate minimongo with data and therefore the initial render of your components will not have any data available. And then have your component re-render again once the data becomes available.

Sorry, I am not that familiar with how this is done with Vue