Meteor
Posted By Sebastian

Meteor & Svelte – Building Full-Stack Reactive Web Applications – 03: Collections


Subscribe On YouTube

Episodes

We’ve started to implement a first Svelte client web application inside the Meteor project in the last episode. The data which we’ve used in this application (issue objects) are coming from a function which has been implemented in the client application directly.

In this application we’re going to change this and introduce the concept of collections. By using Collections you can easily manage data access on your Meteor application both on server and client side.

To store our issues data we’ll create a new collection and therewith store data in Meteor’s build in MongoDB database.

Create Issues Collections

In order to create a new collection for our issues data we’ll first create a new subfolder api in the imports folder and within that newly created folder create a new file issues.js. Insert the following code in issues.js:

import { Mongo } from 'meteor/mongo';

export const Issues = new Mongo.Collection('issues');

Here we’re import Mongo from the meteor/mongo package and then calling Mongo.Collection(‘issues’) to create a new collection with the name issues. This collection will be shared across server and client and therefore is exported.

Import Issues Collection On The Server

Importing the Issues collection on server side is done in server/main.js:

import '../imports/api/issues.js';

This makes sure that the collection is made available on server side and will be created in the MongoDB database as well.

Using Collection In App Component

Let’s move on to the client application and add two more import statements into App.svelte as well:

import { useTracker } from 'meteor/rdb:svelte-meteor-data';
import { Issues } from '../api/issues.js';

Again we’re making sure that the Issues collection is imported as well. Furthermore we’re adding an import statement for useTracker which is imported from the package meteor/rdb:svelte-meteor-data.

Now we’re ready to remove the getIssues function and replace it with the following reactive declaration:

$: issues = useTracker(() => Issues.find({}).fetch());

Here we’re using the useTracker function to retrieve data from our Issue collection. By using the $: Svelte syntax we’re also making sure that we’re using a reactive statement here. This means that everytime useTracker updates the value of issues (everytime the Issues collection changes on the server) any part of the UI which are dependant of the value of issues are updated as well.

Finally we’re ready to use $issues instead of chro in the each block as well:

        {#each $issues as issue}
            <Issue 
                issue={issue} />
        {/each}

Again, in the following you can see the complete update code of App.svelte:

<script>
    import { useTracker } from 'meteor/rdb:svelte-meteor-data';
    import Issue from './Issue.svelte';
    import { Issues } from '../api/issues.js';

    $: issues = useTracker(() => Issues.find({}).fetch());

    // function getIssues() {
    //     return [
    //         { 
    //             title: 'First Issue Title', 
    //             description: 'First Issue Description', 
    //             dueDate: '2021-01-01', 
    //             priority: 'Low'
    //         },
    //         {
    //             title: 'Second Issue Title', 
    //             description: 'Second Issue Description', 
    //             dueDate: '2021-01-01', 
    //             priority: 'Medium'
    //         },
    //         {
    //             title: 'Third Issue Title', 
    //             description: 'Third Issue Description', 
    //             dueDate: '2021-01-03', 
    //             priority: 'High'
    //         }
    //     ];
    // }
</script>

<div>
    <header>
        <h1>Issues:</h1>
    </header>
    <ul>
        {#each $issues as issue}
            <Issue 
                issue={issue} />
        {/each}
    </ul>
</div>

With all the updates made to our code we’re now ready to startup Meteor’s web service once again:

$ meteor

However, accessing the web application in the browser will only show you an empty list of issues:

10.png

Thus, the reason is quite obvious. The Issues collection we’ve created and accessed to retrieve issue data is still empty, so no issue objects are found and outputted. To change this we need to add data the the collection. We’re able to do that be using the MongoDB terminal client which can be started via the following command:

$ meteor mongo

Starting the MongoDB client gives you a command prompt which you can use to directly interact with the MongoDB database:

20.png

Type in the following command to insert a new issue object into the database collection directly:

> db.issues.insert({ title: 'First Issue Title', description: 'First Issue Description', dueDate: '2021-01-01', priority: 'Medium'})

After having executed this command you should be able to see the updated in the browser output immediately

30.png

This is the reactive behaviour of the Meteor application. Once data is changing the UI of the web application is updated as well without the need of manually reloading the site.

Advertisement: Svelte.js - The Complete Guide

Build high-performance web applications with Svelte.js – a lightweight JavaScript compiler:

Svelte.js – The Complete Guide*

  • Svelte.js from scratch, with zero knowledge assumed
  • All the theory and practical applications of Svelte
  • Core concepts and advanced techniques to build Svelte applications

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.