1
00:00:02,000 --> 00:00:03,000
Here we currently returned

2
00:00:03,000 --> 00:00:04,000
at dummy list of comments

3
00:00:04,000 --> 00:00:07,000
and that's of course not the goal.

4
00:00:07,000 --> 00:00:08,000
Let's remove that.

5
00:00:08,000 --> 00:00:11,000
Instead we wanna work with our client

6
00:00:11,000 --> 00:00:15,000
so this client which we got from connecting up here

7
00:00:16,000 --> 00:00:17,000
we wanna work with that.

8
00:00:17,000 --> 00:00:20,000
And in the get case here we also wanna get access

9
00:00:20,000 --> 00:00:22,000
to the database to which we connected.

10
00:00:24,000 --> 00:00:28,000
Like this and then on that database reach out

11
00:00:28,000 --> 00:00:30,000
to the comments collection

12
00:00:30,000 --> 00:00:32,000
so of course the same collection

13
00:00:32,000 --> 00:00:34,000
we are working on here.

14
00:00:35,000 --> 00:00:37,000
Now, instead of calling insert one

15
00:00:37,000 --> 00:00:39,000
we wanna get all the documents in there

16
00:00:39,000 --> 00:00:43,000
and we can do this with help of the find method.

17
00:00:43,000 --> 00:00:46,000
The find method finds us data in a collection

18
00:00:46,000 --> 00:00:49,000
and we can restrict the results

19
00:00:49,000 --> 00:00:51,000
we can narrow down the results

20
00:00:51,000 --> 00:00:53,000
and we can filter results

21
00:00:53,000 --> 00:00:54,000
but if we call find like this

22
00:00:54,000 --> 00:00:56,000
we will fetch all the comments.

23
00:00:56,000 --> 00:00:58,000
And that's the goal here.

24
00:00:58,000 --> 00:01:01,000
In case you wanna learn more about MongoDB,

25
00:01:01,000 --> 00:01:04,000
I strongly recommend my MongoDB course

26
00:01:04,000 --> 00:01:07,000
which is a full course on MongoDB only.

27
00:01:07,000 --> 00:01:09,000
So that might be worth a look then.

28
00:01:09,000 --> 00:01:14,000
Here will keep it basic and just find all documents.

29
00:01:15,000 --> 00:01:19,000
So here we get the documents by awaiting that operation

30
00:01:19,000 --> 00:01:23,000
and to be precise here we wanna call toArray

31
00:01:23,000 --> 00:01:26,000
to get all the documents as an array,

32
00:01:26,000 --> 00:01:30,000
because by default we would not be getting such an array.

33
00:01:30,000 --> 00:01:33,000
We would be getting a cursor with which we have to navigate

34
00:01:33,000 --> 00:01:36,000
through documents manually

35
00:01:36,000 --> 00:01:38,000
and calling toArray simplifies that,

36
00:01:38,000 --> 00:01:40,000
and simply gives us all the entries

37
00:01:40,000 --> 00:01:43,000
in the comments collection as an array.

38
00:01:44,000 --> 00:01:47,000
Actually before doing that I wanna call sort on find

39
00:01:47,000 --> 00:01:49,000
so on the result of find,

40
00:01:49,000 --> 00:01:50,000
I will call sort

41
00:01:51,000 --> 00:01:56,000
because sort allows us to well sort the results

42
00:01:56,000 --> 00:01:59,000
and we do sort by passing an object to sort

43
00:01:59,000 --> 00:02:04,000
where we then specify one of our keys in our documents,

44
00:02:04,000 --> 00:02:09,000
or for example underscore id for the automatically added id

45
00:02:09,000 --> 00:02:11,000
and then minus or plus one

46
00:02:11,000 --> 00:02:15,000
to define if we wanna sort in descending or ascending order.

47
00:02:15,000 --> 00:02:19,000
And I wanna sort the ids in descending order

48
00:02:19,000 --> 00:02:22,000
which we can do by adding underscore id

49
00:02:22,000 --> 00:02:25,000
and setting it to a value of minus one.

50
00:02:25,000 --> 00:02:27,000
This will sort the comments

51
00:02:27,000 --> 00:02:30,000
which we are fetching in descending order

52
00:02:30,000 --> 00:02:33,000
so that the latest comment is the first comment

53
00:02:33,000 --> 00:02:35,000
in this array which we are fetching.

54
00:02:35,000 --> 00:02:37,000
So that's now our documents

55
00:02:37,000 --> 00:02:39,000
which we get as an array

56
00:02:39,000 --> 00:02:42,000
and hence let's now return our documents here

57
00:02:42,000 --> 00:02:44,000
and see what we get.

58
00:02:44,000 --> 00:02:46,000
If we save this

59
00:02:46,000 --> 00:02:49,000
and we go back to our front end

60
00:02:49,000 --> 00:02:53,000
if we open the console there

61
00:02:53,000 --> 00:02:55,000
the developer tools and I hide the comments

62
00:02:55,000 --> 00:02:57,000
and show them again

63
00:02:57,000 --> 00:02:59,000
we are fetching data again

64
00:02:59,000 --> 00:03:03,000
and now I'm getting a warning regarding my key

65
00:03:03,000 --> 00:03:05,000
but we see the comment

66
00:03:05,000 --> 00:03:06,000
so that works.

67
00:03:06,000 --> 00:03:09,000
We are only getting that comment here

68
00:03:09,000 --> 00:03:10,000
that warning I mean,

69
00:03:10,000 --> 00:03:12,000
because if we have a look at the network tab

70
00:03:12,000 --> 00:03:15,000
we see that the comments were are fetching have

71
00:03:15,000 --> 00:03:17,000
the underscore id field

72
00:03:17,000 --> 00:03:22,000
of course because that was auto generated by MongoDB.

73
00:03:23,000 --> 00:03:27,000
But in my front end code here for the comments

74
00:03:27,000 --> 00:03:32,000
in components input comment list

75
00:03:32,000 --> 00:03:36,000
I'm referring to .id without an underscore.

76
00:03:36,000 --> 00:03:39,000
So the simple fix is to add an underscore here

77
00:03:39,000 --> 00:03:41,000
so that we use the correct field

78
00:03:41,000 --> 00:03:44,000
as a key for the list items.

79
00:03:44,000 --> 00:03:45,000
And if we do that and save this

80
00:03:45,000 --> 00:03:47,000
and reload you will see

81
00:03:47,000 --> 00:03:50,000
that will not get any warning anymore

82
00:03:50,000 --> 00:03:53,000
instead our comments do show up correctly here.

83
00:03:53,000 --> 00:03:56,000
Now ,we could of course improve the front end.

84
00:03:56,000 --> 00:03:59,000
We could show a loading spinner once we are fetching.

85
00:03:59,000 --> 00:04:01,000
We could show some feedback

86
00:04:01,000 --> 00:04:03,000
after we submitted our forum,

87
00:04:03,000 --> 00:04:05,000
but again I wanna focus

88
00:04:05,000 --> 00:04:08,000
on next JS Anti API routes here

89
00:04:08,000 --> 00:04:10,000
which is why I only provided

90
00:04:10,000 --> 00:04:12,000
the Dis Basic Front-End for the moment.

91
00:04:12,000 --> 00:04:14,000
But what we can see with all of that

92
00:04:14,000 --> 00:04:18,000
is that working with our API routes works

93
00:04:18,000 --> 00:04:22,000
and that we are able to work with MongoDB in there

94
00:04:22,000 --> 00:04:25,000
so that we are able to connect our API routes

95
00:04:25,000 --> 00:04:29,000
and the code running in there to a real MongoDB database.