Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,410 --> 00:00:03,920
Our query service has a little bit scaffolding put together.
2
00:00:03,930 --> 00:00:08,420
So now we need to make sure that it can receive events of type post created income and created.
3
00:00:08,470 --> 00:00:12,070
Whenever we get post created we're gonna save the post whenever we get common created.
4
00:00:12,070 --> 00:00:15,020
We're gonna save the comment with the associated post.
5
00:00:15,070 --> 00:00:19,690
The first thing you do back over here is decide on a data structure to use to save all these posts and
6
00:00:19,690 --> 00:00:20,730
comments.
7
00:00:20,740 --> 00:00:27,120
We're going to once again use a simple object to store all the posts and comments.
8
00:00:27,210 --> 00:00:31,530
Let me very quickly give you an example of what this object is going to look like eventually so you
9
00:00:31,530 --> 00:00:32,520
don't have to write this code out.
10
00:00:32,520 --> 00:00:36,890
This is a quick example of what post is going to look like.
11
00:00:36,950 --> 00:00:44,590
The Post will be equal eventually to having an object full of some keys and for every one of these keys
12
00:00:45,060 --> 00:00:50,360
we're gonna have the idea of the post that would be identical to the idea right there.
13
00:00:50,440 --> 00:00:56,890
It will have the title The Post and it will have an array of comments associated with this.
14
00:00:56,920 --> 00:01:06,830
And of course every comment will have its own ideas and some content like so to over time as users add
15
00:01:06,830 --> 00:01:08,720
in more post to our application.
16
00:01:08,810 --> 00:01:12,930
We would have say a second post and then a third post and so on.
17
00:01:13,070 --> 00:01:15,430
Again that's what this post object is going to look like.
18
00:01:15,500 --> 00:01:19,940
We just need to make sure that as we receive all these different events we insert data into this post
19
00:01:19,970 --> 00:01:23,100
object with the appropriate structure.
20
00:01:23,210 --> 00:01:28,920
So inside of our post to events right here we're gonna take a look at that req objects.
21
00:01:29,060 --> 00:01:33,720
Remember the wrecked body property is going to be the event itself that we actually care about.
22
00:01:33,800 --> 00:01:36,080
So let's take a look at that event.
23
00:01:36,140 --> 00:01:42,740
Remember that every event that we create as a type and a data property will pull that out of record
24
00:01:42,740 --> 00:01:44,200
body.
25
00:01:44,260 --> 00:01:49,280
We will then set up a very simple series of if statements to take a look at that type.
26
00:01:49,350 --> 00:01:59,920
So let's say if Type is equal to post created then let's go ahead and run some code or if type is equal
27
00:01:59,920 --> 00:02:09,910
to comment created we'll do something entirely different so let's handle post created first if it's
28
00:02:09,910 --> 00:02:11,890
equal the post created that we want to take.
29
00:02:11,890 --> 00:02:12,700
The I.D.
30
00:02:16,120 --> 00:02:22,120
and the title out of data because remember with post created that event is always going to have an I.D.
31
00:02:22,150 --> 00:02:30,100
and a title and we're going to insert that information into our post object we'll say post at I.D. is
32
00:02:30,100 --> 00:02:39,270
going to be equal to an object of IP and title and that should be it will probably also want to default
33
00:02:39,270 --> 00:02:44,400
the value of comments to be an empty array is as well so that later on whenever someone you mentioned
34
00:02:44,400 --> 00:02:48,270
event of common created and we receive that we don't have to worry about creating that array or anything
35
00:02:48,270 --> 00:02:56,850
like that Dallas handle a event of type common created remember an event of type common created is going
36
00:02:56,850 --> 00:03:04,810
to have slightly different structure to it that's going to have an I.D. content and a post I.D. So let's
37
00:03:04,810 --> 00:03:09,850
pull that information out say I.D. content and post I.D.
38
00:03:13,920 --> 00:03:21,780
then we will find the appropriate posts inside of our post object Z a post is posted at post i.e.
39
00:03:25,270 --> 00:03:32,790
well then take a look at post dot comments and we'll push in this new comment so our new comment is
40
00:03:32,790 --> 00:03:40,590
going to have a given I.D. and some content and that's to be it.
41
00:03:40,650 --> 00:03:45,060
Now of course at the very bottom here after we have processed the events this still is a root handler.
42
00:03:45,070 --> 00:03:47,650
So we need to make sure that we send back some kind of response.
43
00:03:47,720 --> 00:03:55,190
We'll do a resort sense of just an empty object to say hey we received the event and processed it then
44
00:03:55,190 --> 00:03:58,360
finally let's go back up to our slash post and point
45
00:04:01,700 --> 00:04:06,620
and anytime someone tries to get the collection of all the posts we have we'll just send back the entire
46
00:04:06,620 --> 00:04:08,040
post object.
47
00:04:08,070 --> 00:04:17,240
They'll do a red dot sent of posts and that should be at let's say this.
48
00:04:17,350 --> 00:04:22,130
I'm going to go back over to my terminal you'll notice I've changed the layout here just make sure everything
49
00:04:22,130 --> 00:04:23,420
is all a bit more legible.
50
00:04:23,510 --> 00:04:30,750
So the order now is the react app those comments very empty.
51
00:04:30,980 --> 00:04:35,400
And the event boss right here so we're going to try to create a new post and a comment.
52
00:04:35,400 --> 00:04:39,410
And we're right now just going to make sure that we don't see any errors coming out of this window right
53
00:04:39,410 --> 00:04:42,010
here because that's where our query service is running.
54
00:04:42,110 --> 00:04:45,830
We're not actually using the query service inside the reactor application just yet again.
55
00:04:45,860 --> 00:04:49,030
I just want to make sure we don't have any errors.
56
00:04:49,180 --> 00:04:57,550
So going to flip back over to the react application going to enter in a title your post I'll refresh
57
00:04:57,910 --> 00:05:03,710
and I'll add in some comment to that post and refresh everything over here still works.
58
00:05:03,840 --> 00:05:09,420
So we expected because we haven't made any change to really any existing code just yet and if I go back
59
00:05:09,470 --> 00:05:14,590
to my terminal window it looks like the query service is running successfully as well cause we can't
60
00:05:14,590 --> 00:05:20,300
really see any data we can't really verify that it's receiving these events or processing them correctly.
61
00:05:20,320 --> 00:05:28,020
We'll tell you what about after we process an event inside of our query service that we run these two
62
00:05:28,020 --> 00:05:33,020
if statements let's just print out the current data structure or the current post collection.
63
00:05:33,010 --> 00:05:47,510
We have it's all save this I'm going to go back over again I'll enter in a second post and refresh and
64
00:05:47,510 --> 00:05:55,070
then a second comment and submit and now if I go back over my terminal I should see the appropriate
65
00:05:55,070 --> 00:05:58,790
data being reflected inside of my query service.
66
00:05:58,790 --> 00:06:03,770
Take a look at that we've got two separate console logs the first one was from receiving the event of
67
00:06:03,780 --> 00:06:09,160
post created and it looks like we received that post and add it to our post collection.
68
00:06:09,410 --> 00:06:12,380
And the second console log right here is from creating the comment.
69
00:06:12,500 --> 00:06:17,630
So there's the exact same post there is our list of comments and you can see that there is a object
70
00:06:17,660 --> 00:06:22,490
inside that array is being abbreviated right now just because node when it prints out a nested data
71
00:06:22,490 --> 00:06:27,680
structure or nested object doesn't want to recursively print out everything inside there at a and same
72
00:06:27,680 --> 00:06:28,280
depth.
73
00:06:28,340 --> 00:06:30,670
So chances are the correct comment is inside there.
74
00:06:30,830 --> 00:06:33,830
We just can't really see it effectively using this tool just yet.
75
00:06:34,610 --> 00:06:34,920
All right.
76
00:06:34,950 --> 00:06:36,640
Once this looks pretty good.
77
00:06:36,740 --> 00:06:43,250
So in theory our query service now has all the data that is required to get the entire list of posts
78
00:06:43,370 --> 00:06:45,260
and all the associated comments.
79
00:06:45,330 --> 00:06:49,790
Now the last thing to do is update our ReACT application and make sure that the react application will
80
00:06:49,790 --> 00:06:55,190
make a request to this end point to get this data structure right here are set and then use that structure
81
00:06:55,370 --> 00:07:00,850
to list out all the posts and comments let's take a quick pause right here and start to work on the
82
00:07:00,850 --> 00:07:02,290
react app in just a moment.
9445
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.