One-To-Many Relationship Between Meteor Collections. Part One

Shingai MunyukiBy Shingai Munyuki 11 months agoNo Comments

Say you want to create an application that needs you to create relationships, such as a One-To-Many relationship between two databases, for example, you are building a platform that allows people to write articles and you as a user reading those articles, can sort articles you love by creating categories or lists. You can save any article you want, in any of the lists you created, then when you navigate to a particular list, you can see the posts within that list.

The thing is, you don’t really want to get messy, saving the post document into a category right? So, how do we build One-To-Many relationships between two Mongo collections without Meteor packages? We would want some way to reference the post, ie. save a reference id of the post, within a given category, then when we need to display the posts in a particular category, we just use that reference.

So to explore this, we will create a simple application with Meteor js. It will do the following.

  1. The Ability for the user to create posts.
  2. The Ability for the user to create categories.
  3. The ability for the user to save posts into any category they like, as long as it’s been created.
  4. The ability for the user to navigate to a given category and view the posts that category belongs too.

 

We are also going to be creating our Meteor application with the import based structure more closely recommended by the Meteor guide.

So Let’s call our app, postsApp and let’s create it according to the latest meteor standards.

meteor create postsApp --full

Now let’s get into our newly created folder, install npm then run meteor.

cd postsApp
meteor

You are good to go, navigate to your application on localhost.


http://localhost:3000/

 

Well, that was easy, wasn’t it?


Meteor Packages

In your packages file at .Meteor/packages, add the following Meteor packages to your list. These are the packages we will use in our application. None however is a package for creating relationships.

//materialize will be used for our UI based on material design.

materialize:materialize

//We will use material icons for all our icons, you can fine them HERE

simonhochrein:material-icons

//All things is a good package to visualise our collections.

meteortoys:allthings


Files and Folder Structure

Let's set up our folder and file structure that ensures optimum loading time.

There are two sets of components we need to create our One-To-Many relationship effectively. Posts and Categories. So we will create two folders respectively, within the components folder.


/imports/ui/components

Navigate into the posts folder and create the following files:


/imports/ui/components/posts

  • We need to be able to create a post that has a title and content. Let’s call this component createPost. Create two files, createPost.js and createPost.html.

  • We need a component that shows a list of all the posts we created and we create. Let’s call this component showPost’. Let’s create two files, showPosts.js and showPosts.html.

  • Once we have a list of the posts we create, we need a way to access an individual post that has the complete content typically, instead of just the summary. let call this component  singlePost. Create two files singlePost.html and singlePost.js

And for the Categories, we have a similar structure so repeat the same process.


  • createCategory

  • showCategories

  • singleCategory

You should have the following files as components.


Posts Folder

    /imports/ui/components/posts/createPost.html
    /imports/ui/components/posts/createPost.js
    /imports/ui/components/posts/showPosts.html
    /imports/ui/components/posts/showPosts.js
    /imports/ui/components/posts/singlePost.html
    /imports/ui/components/posts/singlePost.js

Categories Folder

    /imports/ui/components/categories/createCategory.html
    /imports/ui/components/categories/createCategory.js
    /imports/ui/components/categories/showCategories.html
    /imports/ui/components/categories/showCategories.js
    /imports/ui/components/categories/singleCategory.html
    /imports/ui/components/categories/singleCategory.js

Great. That’s all the UI files we will need.


Routes

Let's create a basic route that will give us navigation to our home, categories and individual categories

Navigate to you routes file:


imports/startup/client/routes.js

Let’s go ahead and create this sysyem:



//generated by meteor

import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';

// Import needed templates
import '../../ui/layouts/body/body.js';
import '../../ui/pages/home/home.js';
import '../../ui/pages/not-found/not-found.js';

// Set up all routes in the app
FlowRouter.route('/', {
  name: 'App.home',
  action() {
    BlazeLayout.render('App_body', { main: 'App_home' });
  },
});

FlowRouter.notFound = {
  action() {
    BlazeLayout.render('App_body', { main: 'App_notFound' });
  },
};

FlowRouter.route('/categories', {
    name: 'Stream',
    action() {
        BlazeLayout.render("App_body", {main: "showCategories"});
    }
});

FlowRouter.route('/category/:_id', {
    name: 'Stream',
    action() {
        BlazeLayout.render("App_body", {main: "singleCategory"});
    }
});

And that’s it for the initial set up. Test that the routes are working fine. In the next part, we will go deeper into creating our app to explore ourOne-To-Many relationship.

Categories:
  Developer, Javascript, Meteor, Tutorials
this post was shared 0 times
 000
Shingai Munyuki
About

 Shingai Munyuki

  (5 articles)

Shingai is a Designer and Developer. Founder of Journey Less. Creator, futurist, technologist. He sees art, design and innovation as the symptom of a highly developed society.

Leave a Reply

Your email address will not be published.