Dynamic Model Referencing with Mongoose

Emeka Okwor — Wed, 16 Jun 2021 23:35:53 +0000

So, I had a mongoose schema that referenced multiple collections. I wanted a situation where I could populate the schema from these collections depending on the property value in the document. Did I confuse you? Oh, my bad, I'd give you a logical example.
Say we have a comment schema, and a user can comment on a blog post and a product. How can we populate the schema with the blog post comments or product comments programmatically? Well, now you see what I mean, right?.
It appears there is something called refPath. The refPath option is a more sophisticated alternative to ref. If ref is just a string, mongoose will always query the same model to find the populated sub documents. With refPath, you can configure what model Mongoose uses for each doc. It automatically instructs mongoose to look into an 'onModel' property to find the correct model to populate. For example, let's say we have a comment schema like so

const commentSchema = new Schema({
  body: { type: String, required: true },
  on: {
    type: Schema.Types.ObjectId,
    required: true,
    refPath: 'onModel'
  },
  onModel: {
    type: String,
    required: true,
    enum: ['BlogPost', 'Product']
  }
});

Notice the property 'onModel'?. It defines the name of our models "BlogPost" and "Product" referenced in the schema like sorefpath:'onModel'.

Now, Let's create our models and add some data


// create models
const Product = mongoose.model('Product', new Schema({ name: String }));

const BlogPost = mongoose.model('BlogPost', new Schema({ title: String }));

const Comment = mongoose.model('Comment', commentSchema);

// add data to collections
const book = await Product.create({ name: 'The Count of Monte Cristo' });

const post = await BlogPost.create({ title: 'Top 10 French Novels' });

const commentOnBook = await Comment.create({
  body: 'Great read',
  on: book._id,
  onModel: 'Product'
});

const commentOnPost = await Comment.create({
  body: 'Very informative',
  on: post._id,
  onModel: 'BlogPost'
});

We can query the comment schema, populate it with the data of a particular model we specified like so

const comments = await Comment.find().populate({ path: "BlogPost"})

when you log comments, you should see something like this

// [ { _id: ....., on: { title: 'Top 10 French Novels' } }]

Cool, init? I hope it helps someone out there. Happy coding.

Convert Express-Generator App To Typescript

Emeka Okwor — Mon, 14 Jun 2021 18:44:00 +0000

Hi guys,

In this article, I'll be showing you how to convert an express-generator app to Typescript. It's pretty straightforward and we should be done in a flash.

This is my first ever write-up 😩, I do hope you find a place in your heart to pardon any errors.😁 😁

I started learning Typescript recently, and honestly, my life has been a lot easier ever since. I’ll be sharing my knowledge with you all once in a while.

Enough said, let's jump right in and start coding, shall we? 😎

From an Express-Generator App to Typescript

Let’s head to the terminal.

First, you need to navigate to the directory where you'd like to create your express app, type in npx express-generator, and hit the enter button.

You should see a structure like this automatically generated for you



├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── Javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

Next, run yarn in your terminal to install all dependencies for this project. If everything goes fine, run yarn start.

Your express server should be up and running, cool. 😎

Now, it's time for typescript, but before you start writing typescript codes, you’ll need to install typescript and all the type definitions for the project dependencies.

So, just head to your terminal and type the command below;

yarn add --dev typescript @types/cookie-parser @types/http-errors @types/morgan @types/node ts-node.

Next, you’ll be creating a configuration file for typescript. Thus, run yarn tsc --init; this will create a tsconfig file.

You can then navigate to your root directory and create an src folder. Move the routes folder and app.js into the newly created src folder.

Your new folder structure should look like this;



├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── Javascripts
│   └── stylesheets
│       └── style.css
├── src
│   ├── app.js
│   ├── routes
│     ├── index.js
│     └── users.js
├── tsconfig.json
├── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

Let's do some configuration in your "tsconfig.json" file.

Here, we want to give typescript some instructions on what to do with the typescript files. So, open the tsconfig file and change the target value to "ES2020"; uncomment the outDir field, change its value to "dist". Do that for rootDir as well and change its value to "src".

Lest I forget, you also need to add an include field after "compilerOptions", its value should be an array with a string in it like this;"include": ["src/"].



 {
    "compilerOptions": {
       ....
    },
   "include": ["src/"]
}

You can also check out this article to help with that: tsconfig.json

Alright, I believe we are done with the configurations, so, let's start coding.

Step 1: Head to the src folder and rename all .js files to .ts and open the "app.ts" file. Change all the commonjs "require" imports to ES modules "import" like so import express from 'express'.

Once done, you’ll need to add the types to the parameters on the error handler function, since you have installed the type definitions. You can import them from their libraries.

You'll need to import Request, Response, and NextFunction from express and HttpError from http-errors as named imports.

Make sure you change the export statement at the bottom to ES modules export default. Hmm, yeah one more thing, don’t forget to change all "vars" to "const".

Your app.ts should look like so;

We’re all done with the "app.ts", let's now convert the files in the routes directory.

Step 2: Open the "index.ts" file in the routes directory. You will be doing the same thing you did in the "app.ts".

So, import the types for the request, response, and next parameter and change the export statement at the bottom to ES modules "export default".

Do the same for the "users.ts" file. It should look like this;

Nice work, you are almost done.

If you head to the bin folder and open the www file, you will notice you are requiring "app.js" which has now been changed to a typescript file. The server will crash if you try to run it this way.

You need to require the compiled app.js file in the dist folder. Before you do that, run tsc in your terminal to transpile our typescript code into javascript. This will create the "dist" folder. Remember where you set it in the tsconfig? Cool!

Now, you have the dist folder. You can change the directory to "../dist/app" and chain a .default method to it like so;

At this point, you might encounter an error about the views engine when you run your localhost:3000 on the browser, you can easily fix that by adding a '../" to your view engine setup in app.ts like this;

If you’ve carefully followed all the steps, run yarn start in the terminal. Yep, your server should be up and running.

Cheers, you have just converted your app to typescript. Easy-peasy, right? 🔥

Do leave a comment if you found this useful.

DEV Community: Emeka Okwor

Dynamic Model Referencing with Mongoose

Convert Express-Generator App To Typescript

From an Express-Generator App to Typescript