Here we currently returned
at dummy list of comments
and that's of course not the goal.
Let's remove that.
Instead we wanna work with our client
so this client which we got from connecting up here
we wanna work with that.
And in the get case here we also wanna get access
to the database to which we connected.
Like this and then on that database reach out
to the comments collection
so of course the same collection
we are working on here.
Now, instead of calling insert one
we wanna get all the documents in there
and we can do this with help of the find method.
The find method finds us data in a collection
and we can restrict the results
we can narrow down the results
and we can filter results
but if we call find like this
we will fetch all the comments.
And that's the goal here.
In case you wanna learn more about MongoDB,
I strongly recommend my MongoDB course
which is a full course on MongoDB only.
So that might be worth a look then.
Here will keep it basic and just find all documents.
So here we get the documents by awaiting that operation
and to be precise here we wanna call toArray
to get all the documents as an array,
because by default we would not be getting such an array.
We would be getting a cursor with which we have to navigate
through documents manually
and calling toArray simplifies that,
and simply gives us all the entries
in the comments collection as an array.
Actually before doing that I wanna call sort on find
so on the result of find,
I will call sort
because sort allows us to well sort the results
and we do sort by passing an object to sort
where we then specify one of our keys in our documents,
or for example underscore id for the automatically added id
and then minus or plus one
to define if we wanna sort in descending or ascending order.
And I wanna sort the ids in descending order
which we can do by adding underscore id
and setting it to a value of minus one.
This will sort the comments
which we are fetching in descending order
so that the latest comment is the first comment
in this array which we are fetching.
So that's now our documents
which we get as an array
and hence let's now return our documents here
and see what we get.
If we save this
and we go back to our front end
if we open the console there
the developer tools and I hide the comments
and show them again
we are fetching data again
and now I'm getting a warning regarding my key
but we see the comment
so that works.
We are only getting that comment here
that warning I mean,
because if we have a look at the network tab
we see that the comments were are fetching have
the underscore id field
of course because that was auto generated by MongoDB.
But in my front end code here for the comments
in components input comment list
I'm referring to .id without an underscore.
So the simple fix is to add an underscore here
so that we use the correct field
as a key for the list items.
And if we do that and save this
and reload you will see
that will not get any warning anymore
instead our comments do show up correctly here.
Now ,we could of course improve the front end.
We could show a loading spinner once we are fetching.
We could show some feedback
after we submitted our forum,
but again I wanna focus
on next JS Anti API routes here
which is why I only provided
the Dis Basic Front-End for the moment.
But what we can see with all of that
is that working with our API routes works
and that we are able to work with MongoDB in there
so that we are able to connect our API routes
and the code running in there to a real MongoDB database.