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

This post has been published first on CodingTheSmartWay.com.

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:

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:

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

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.

Svelte Course Recommendation

Svelte.js — The Complete Guide*

* 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!

CodingTheSmartWay.com Blog

CodingTheSmartWay.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store