Original subtitles

So now we also execute server-side code

in getStaticProps and I can't emphasize enough

that this is a standard way of doing it.

This code will not end up in the client-side bundle.

Your credentials will not be exposed,

the bundle will not be bloated.

This code will execute when this page is pre-generated.

Now, for the MeetupDetail page,

we also want to fetch data from the database now

for a specific meetup that was selected

but also for determining which paths should be generated.

So which meetup IDs should be supported

because after all,

we do only have a limited list of meetups

with specific IDs here.

So we wanna pre-generate all the paths

for all those IDs which we have here.

And therefore, we will again need

to connect to MongoDB.

So for this, from index.js,

I will again copy this connection code

and again, you could refactor therefore

if you wanted to avoid duplication.

And I will import MongoClient here

from mongodb like this

in the meetupId index.js file

and then here we can start with getStaticPaths.

In there, I wanna connect to my database

and get access to the meetupsCollection

and then now here I wanna get all the meetup data.

So for this, I get my meetups

by again awaiting meetupsCollection.find.

Find gives me access to all the meetups.

Now, actually here I'm only interested in the IDs

and therefore we can tweak find

and pass an empty object as a first argument.

Here we could define our filter criteria

if we wanna not find all documents

but filter for certain field values.

But I do wanna find all here.

Hence we use a empty object,

which means give me all the objects.

I have no filter criteria

but then we can pass a second argument

where we can define which fields should be extracted

for every document.

And by default, all the fields will be returned.

So all the field values, title, image and so on

but if we're only interested in the ID,

we can also add _id here

and set this to one,

which means only include the ID

but no other field values.

And with that, we're only fetching the IDs.

So we fetch the document objects

but they each will only contain the ID, nothing else.

Now again, we should call toArray here

to convert this to a JavaScript array of objects.

And now we got our meetups here

and now we can generate the paths dynamically.

Instead of hard coding this array,

we can use meetups here

and then map every meetup item,

which is a document with an id

into an object, because paths should be an array of objects,

where every object has this params key

just as we have it down there.

And then we have a nested object in there

where we define our meetupId values.

And the values for meetupId should now be our IDs here.

So here we can then access meetup,

so this parameter, which map gives us automatically,

._id.toString, like that.

And now get rid of this array here.

With that, we're generating our array of paths dynamically.

And as a result, if I now save this,

if we reload the starting page,

if we click on Show Details,

we're taken to the page for this specific object,

for this specific meetup.

And you'll see this cryptic ID here,

which is this autogenerated ID MongoDB generated for us.

So that's working.

But we're not yet fetching the data dynamically here.

I wanna do that as well.

For this, first of all,

I'll close the connection here.

It isn't a bad idea to do that once we're done

and then I'll copy this code

from getStaticPaths and add it here

after we got the meetupId instead of logging the ID.

I'll again connect and get access to the collection.

Again, we could outsource this into a function

if we wanted to.

And then here, I want to get access to a single meetup,

not to all the meetups, just a single meetup.

So I want to get access to my selectedMeetup here

and we do this by using the meetupsCollection

and then using the the findOne method.

findOne finds one single document.

And to findOne, we need to pass an object

where we define how to filter,

how to search for that document.

On this object, you can pass your field names,

like title, image, address or description as keys

and then the values for which you wanna search as values.

So we could pass title: A First Meetup as a key-value pair

into this object here

to find this first meetup where the title is A First Meetup.

Now, here we don't wanna search by title

but instead by ID.

So I wanna make sure that _id,

the automatically added and generated ID field,

has a value of meetupId, so this meetupId,

which we extract from the params up there.

This then finds us this single meetup.

This returns a promise because it's an asynchronous task

and hence we should await this

and make sure that we added async in front of the function.

Oops, and with that we got the selectedMeetup eventually.

And now it's the selectedMeetup,

which I return here as meetupData, like this.

And then if we do that and save everything,

if I reload this meetup here,

it should load successfully

and it should display all the data.

Now, at the moment, the data I'm showing here, however,

is still hard coded in the JSX code

and now it's finally time to use our props data here.

So the actual fetch data in the JSX code as well.

For this, we're exposing the meetupData prop

to the component and hence, here we should accept props

and use that data here.

So that for image, I'm passing in props.image

and for the title, we pass in props.title and so on.

Same for the address.

That's props.address.

And for description, it's props.description.

And actually not props dot but props.meetupData dot

because we have that meetupData prop,

this prop which holds the meetup item, the meetup object.

So we need to drill into that meetupData object first

before we can access image, title, address and description.

Now, once we did all of that,

there's one other thing we need to do though,

which I just noticed.

Here for findOne, I'm looking for an id,

which is equal to the id I'm getting out

of my URL but that, of course, will be a string.

Keep in mind that in MongoDB actually,

our IDs are these strange object ID things.

To ensure that we can correctly look for a specific ID,

we need to convert it from string

to such a object ID thing

and for this, from MongoDB,

you should import ObjectId like this

with a lowercase D at the end.

And wrap your string with that.

So down here, wrap ObjectId around meetupId

and this will convert this string

into such a ObjectId object.

And once that is done,

we also wanna go to selectedMeetup

and make sure that there we convert this id,

this _id field back to a string

because otherwise, we'll get that serialization error

we saw before.

So for this, I'll set meetupData actually to an object

where I do add an id field,

which is equal to selectedMeetup._id.toString

and where I then add all the other data,

like selectedMeetup.title,

then the address, which is selectedMeetup.address.

Then the image, which is selectedMeetup.image

and then also last but not least,

the description, which is selectedMeetup.description.

And with all that done, if we now save this,

if you reload a single meetup page,

you see the data for that single meetup.

And that works for all the meetups now.

And now these meetup detail pages

are pre-rendered on the server dynamically

with our code being active

and with our code establishing that database connection

and fetching the data from there.