Hello
This is my first time using Meteor and I was trying to follow the React tutorial, but in the part where they fetch the example data from the server, useTracker appears to be returning an empty array.
Here is the code of the main.js file in server folder:
import { Meteor } from 'meteor/meteor';
import { TasksCollection } from '/imports/api/TasksCollection';
const insertTask = taskText => TasksCollection.insert({ text: taskText });
Meteor.startup(() => {
if (TasksCollection.find().count() === 0) {
[
'First Task',
'Second Task',
'Third Task',
'Fourth Task',
'Fifth Task',
'Sixth Task',
'Seventh Task'
].forEach((task) => insertTask(task))
}
});
And here is the code of the App.jsx in client folder:
import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { TasksCollection } from '/imports/api/TasksCollection';
import { Task } from './Task';
export const App = () => {
const tasks = useTracker(() => TasksCollection.find({}).fetch());
return (
<div>
<h1>Welcome to Meteor!</h1>
<ul>
{ tasks.map(task => <Task key={ task._id } task={ task }/>) }
</ul>
</div>
);
};
The tutorial says that after this, the tasks defined in the main.js file should appear in screen inside a list, but in my case nothing appeared. With a console log I realized that const tasks = useTracker(() => TasksCollection.find({}).fetch()); is returning an empty array.
You can see that part of the tutorial here
What is wrong?