finish collections.md

This commit is contained in:
denihs
2024-08-02 10:29:42 -04:00
parent f377b3431e
commit 1ebb409295
5 changed files with 12 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

View File

@@ -118,7 +118,7 @@ Now, we need to import this file in our server:
...
import { TasksCollection } from '/imports/api/TasksCollection';
import "../imports/api/TasksPublications";
import "../imports/api/TasksPublications"; // [!code highlight]
const insertTask = taskText => TasksCollection.insertAsync({ text: taskText });
...
@@ -145,20 +145,28 @@ export const App = () => {
}
```
As you can see, when subscribing to a publication using `useSubscribe` you'll get a `isLoading` function, that you can use to render some loading component before the data is ready.
> For more information on Publications/Subscriptions, please check our [docs](https://v3-docs.meteor.com/api/meteor.html#pubsub).
See how your app should look like now:
<img width="200px" src="/tutorials/react/assets/collections-tasks-list.png"/>
You can change your data on MongoDB in the server and your app will react and re-render for you.
You can connect to your MongoDB running `meteor mongo` in the terminal from your app folder or using a Mongo UI client, like [NoSQLBooster](https://nosqlbooster.com/downloads). Your embedded MongoDB is running in port `3001`.
See how to connect:
<img width="500px" src="/tutorials/react/assets/collections-connect-db.png"/>
See your database:
<img width="500px" src="/tutorials/react/assets/collections-see-database.png"/>
You can double-click your collection to see the documents stored on it:
But wait, how are my tasks coming from the server to the client? We are going to explain this later, in the step about Publications and Subscriptions. What you need to know now is that you are publishing all the data from the database to the client. This will be removed later as we don't want to publish all the data all the time.
> Review: you can check how your code should be at the end of this step [here](https://github.com/meteor/react-tutorial/tree/master/src/simple-todos/step02)
<img width="500px" src="/tutorials/react/assets/collections-documents.png"/>
In the next step, we are going to create tasks using a form.