So it's great that we're now storing meetups
here in our collection,
but of course we're not using those stored meetups.
If we go to all meetups, I still display my dummy meetups,
the same for the details page.
Here we would now want to fetch data from mongodb as well.
And of course we could now create new API routes.
We could create an API route called meetups,
and in there, we add this handler function,
we connect to mongodb
and we then write code that fetches all the meetups.
And then on the starting page, in getStaticProps here,
we could simply use fetch()
and indeed nextJS adds a feature
that you can use fetch() on server side code as well.
Normally, you can only use it in the browser
but in Next projects, you can use fetch()
in server side code snippets as well.
And we could then use fetch() therefore,
to send the request to /api/meetups,
fetch all the meetups
and then populate our props with those meetups.
We could do that, but it would be a bit cumbersome.
Sending a request to our own API end point here
is a bit redundant.
Keep in mind that I mentioned that
the code you add here in getStaticProps,
just as in getServerSideProps and getStaticProps,
will only run on the server or during build time,
but never in the client.
So the code in here, will also not be exposed to the client.
So therefore here, if you wanna fetch all meet-ups,
we can directly write the code for doing so
here inside of getStaticProps
or in a helper function, which we then execute here.
So we don't need to send the request to our own API route,
we can immediately execute the code just here
which then writes this extra unnecessary requests
which would be sent otherwise.
So therefore here we can, again import MongoClient
from mongodb, and then connect to it here.
Now, when you import something here in a page component file
and that something is then only used in getServerSideProps
or getStaticProps, the imported package will not be part
of the client side bundle.
So you can import code here
which will then only be executed on the server,
and nextJS will detect this
and not include it in your client's side bundle,
which is good both for bundle size considerations
as well as for security.
So you can import both server side
and clients side code here,
and depending on where you use it,
it will be included in different bundles
which are independent from each other.
That's a nice, smart feature built into nextJS.
And therefore with MongoClient import here,
We can use it in getStaticProps to again connect.
And now we can go to the API route
and get rid of meetups.js there by the way,
and the new-meetup.js we can now in the end copy this code
for establishing connection,
getting access to the database
and getting access to a collection here.
We could therefore also refactor this
and outsource it into a separate function
to avoid copying this,
but here to be very explicit
about which code you can execute where,
I will copy it and paste it here into getStaticProps.
With that, we do connect here and then once we did connect,
and once we did reach out to the meetupsCollection,
we can use the meetupsCollection
to call the find method there
and find() will by default find
all the documents in that collection.
It's an async task, returning a promise
which we can await here
because I'm using the async keyword here.
And then ultimately we'll therefore get our meetups here.
To be precise we, should call toArray() here after find()
so that we get back an array of documents.
Then we have this array of meetups
and to meetups here, which I set to my props
could now be the meetups, which I'm fetching from mongodb.
We can then also of course close the connection again
once we're done patching data from mongodb
before we return.
And if we do that and reload this all meetups page,
we get this error.
This error is related to the auto-generated ID.
As you can see, it's not a string
it's this strange object ID thing.
And that turns out to be a more complex object
which can't be returned as data just like this.
Therefore what we actually need to do here,
is the meetups which we're getting from the database,
we wanna map this array,
so that we transform every meetup a little bit,
and then we return an object here for every meetup
where we have a title which is meetup.title,
where we have an address which is meetup.address,
where we have an image which is meetup.image
and where we have our description maybe
though we actually don't need this here.
So we can avoid description for this component
because we're not outputting the description anyways
on this all meetups page.
But we do also add an ID field, not underscore ID
but just ID like this, because I'm using just ID like this
in my front end components.
And we set this equal to meet.dot_id.toString().
And this will then convert this object to a string,
which is usable.
And if we convert our data like this and save everything,
you will see that if we reload the starting page
this works and we see our meetups again,
but that's now actually a list of meetups
based on the meetup data we have in our mongodb database,
not our dummy meetups anymore.
And I can prove this,
if I remove my dummy meetups array here,
if I remove this array entirely from this index.js file
everything will still work fine,
if we reload the starting page.
So now we are pre-rendering this page
with data that's actually coming from a database.
And all this code will execute
whenever this page is pre-generated.
So not for every incoming request,
because it's not getServerSideProps but getStaticProps.
But therefore during the build process,
and when we revalidate, then this page will be pre-rendered
and this code will run again.