DEV Community

Cover image for Using Mongoose's Populate in Next.Js
JanetTheDev
JanetTheDev

Posted on

Using Mongoose's Populate in Next.Js

Overview of What We're Doing

Image description

In the namecategories collection in MongoDB, we want to replace the object ids in tags, with the matching objects in the name tags Collection

So the end result will be:
name: "games"
tags: [
0: {_id: ...., nameTag: "I love you colonel Sanders", __v:0}
1: {_id: ...., nameTag: "Hatoful Boyfriend", __v:0}
2: {_id: ...., nameTag: "Dream Daddy", __v:0}
3: {_id: ...., nameTag: "Sephiroth", __v:0}
]

The Setup

The Page Calling the API

Image description

The models:

Image description

The API:

Image description

The Problem

Every time I tried to populate with my "NameTag" collection {} was returned.

Image description

However when I populated with my "User" collection it worked??๐Ÿคจ

Image description

TLDR answer if you're having the same problem:

Import the model you're populating with. Even though it will be greyed out, the import is needed for the populate to work

Image description

The Debugging Process

Testing to see if we can grab data from the "NameTags" database

I kept thinking "huh it seems like mongoose isn't able to communicate with the collection for some reason". And turns out this hunch was key to solving the problem!

So I tried to do NameTag.Find() to see if even that would work. And, wait for it...๐Ÿฅ๐Ÿฅ๐Ÿฅ I originally got {} back.

Doh, of course it's {} since I didn't import the NameTag model on the top! ๐Ÿคฆ๐Ÿ˜‚

After it was imported it worked! Ta-dah!

Image description

Then when I switched back to trying populate, it worked!

Image description

When I removed "import NameTag from '../../../models/NameTag'" from the top and saved it initially worked. But when I restarted the terminal it no longer worked.

Image description

When the import was re-added and the terminal restarted, it worked! So the import was key.

Why the User Model worked but NameTags didn't

The user model was imported in other app\pages

Image description

However the NameTag model wasn't! To test this theory I moved the import out of the app\pages\api\name-categories file and into the app\pages\api\auth file.

Image description

And what do you know the populate still works!

Working code

Image description

Image description

Image description

Basic Build Information:

"mongodb": "^4.13.0",
"mongoose": "^6.8.0",
"next": "12.3.1",
"node": "18.2.0"

Newest versions as of today:
"mongodb": "6.0.0"
"mongoose": "6.9.2"
"next" : "13.1.6"
"node" : "18.14.1 LTS/ 19.6.1 current"

My mongodb dependency is out of date, so that might be what's causing this bug and requiring the workaround.

Bonus! Ways to write out Populate

In the process of debugging I discovered there's many ways to write populate! So here's options for you to choose from:

  1. .populate( {path:"propertywithobjectids", model:"modelname"} ) + don't add ref to the model Image description

2.populate(
{path:"propertywithobjectids"}
)
+
add ref inside the property which has the list of object ids to populate

Image description

Image description

Special note:

  • the [{ }] syntax must be used, since you're creating an array of objects

  • Import schema:
    import {Schema} from "mongoose"

  • then type:
    type: Schema.Types.ObjectId,

3 populate(
"propertywithobjectids"
)
+
add ref inside the property which has the list of object ids to populate

Image description

Image description

If you don't want to import {Schema} from "mongoose" you can write
Type:mongoose.Schema.Types.ObjectId

Top comments (2)

Collapse
 
mahmoud_bebars profile image
m.bebars

Thank you, You saved me lot of time & data processing
I was going to lose my mind how the populate works fine on my Nodejs Server but the same models setup & Request isn't working in NextJS

Turns Out it Happened because I wasn't importing the model & I didn't know I had to import it even I won't use it ๐Ÿคฆโ€โ™‚๏ธ
& I want an explanation for this If you Have...

Thanks again

Collapse
 
janetthedev profile image
JanetTheDev

So grateful I could spare someone else some pain!

"I was going to lose my mind how the populate works fine on my Nodejs Server but the same models setup & Request isn't working in NextJS" Oh man can I relate to that, I can't say how long I tore my hair out trying to get this to work, this took a few years off my life ๐Ÿ˜‚๐Ÿ˜ญ.

I'm still not sure myself why it requires the import to be honest, You would think that since we told populate what model to grab the data from it should work, like every documentation I looked at said?

But for some reason populate seems to get stuck on stupid in Next.JS and needs the import to figure out where to go. I'm assuming it's some sort of bug, but I'm not sure what exactly causes it.