Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,250 --> 00:00:05,750
Now that our query service is all put together we're going to need to make some changes to the react
2
00:00:05,750 --> 00:00:09,540
application make sure that it reaches out to the query service to get the data that it needs.
3
00:00:09,930 --> 00:00:16,130
So right now a react application makes get requests to our post service and get requests to our common
4
00:00:16,130 --> 00:00:20,680
service directly whenever it needs to show posts or whenever it needs to show comments.
5
00:00:20,700 --> 00:00:22,250
So that's not what we want anymore.
6
00:00:22,250 --> 00:00:28,190
Rather than making a request to posts or comments we want the react application to make one single request
7
00:00:28,550 --> 00:00:33,500
over to query service where it's going to get all the information it needs to show everything about
8
00:00:33,500 --> 00:00:34,160
our application.
9
00:00:34,160 --> 00:00:41,710
All the posts and all the associated comments as a quick reminder very service runs on part 4000 too.
10
00:00:41,740 --> 00:00:46,220
So we want to make sure that we go round and update our request to go to port four thousand two and
11
00:00:46,220 --> 00:00:48,920
make a GET request to slash post.
12
00:00:48,950 --> 00:00:53,690
The other thing I want to mention very quickly is that we're right now we're just talking about reading
13
00:00:53,780 --> 00:00:59,410
data we're just talking about getting a list opposed to the show to the user the post service and comment
14
00:00:59,410 --> 00:01:05,590
service are still 100 percent in charge of actually creating comments and creating posts.
15
00:01:05,650 --> 00:01:10,750
So if the exact application needs to create a post or create a comment it will still reach out to these
16
00:01:10,750 --> 00:01:12,460
services directly.
17
00:01:12,460 --> 00:01:17,060
All we're talking about right now is getting information to show to the user okay.
18
00:01:17,100 --> 00:01:18,860
So let's open up our ReACT application.
19
00:01:18,890 --> 00:01:25,490
We're gonna make sure that we only make that one request directly to the query service so back inside
20
00:01:25,490 --> 00:01:30,100
my editor I'll find the client directory I'll then find our.
21
00:01:30,510 --> 00:01:33,970
And then finally post list inside a post list.
22
00:01:33,970 --> 00:01:38,800
This is where we are making a request to get a big list of all of our posts from the post service right
23
00:01:38,800 --> 00:01:39,780
now.
24
00:01:39,850 --> 00:01:41,080
That's not what we want anymore.
25
00:01:41,080 --> 00:01:48,650
We instead want to make a request to local host four thousand two and then still slash post again 4000
26
00:01:48,650 --> 00:01:55,100
to is where our query service is running let's then do a quick console log of resident data just so
27
00:01:55,100 --> 00:01:59,270
we can inspect the information that comes back and just make sure that we've got everything we expect
28
00:02:01,270 --> 00:02:06,130
I'm going to say this file go back to where my browser and check out check out the react application
29
00:02:07,470 --> 00:02:13,050
you'll notice that my app is automatically refreshed inside my console I'll see that console log so
30
00:02:13,100 --> 00:02:18,640
this is the big list of posts and embedded comments we got back from the query service.
31
00:02:18,730 --> 00:02:25,030
That's the idea of a post inside is the actual idea The Post along with the title The Post entity array
32
00:02:25,030 --> 00:02:30,800
of associated comments so it looks like it's working correctly right now we have are getting all the
33
00:02:30,800 --> 00:02:37,050
data that we expect it looks like the application itself is still working as well but if you take a
34
00:02:37,050 --> 00:02:41,430
look at the network request blog you'll notice that the react app is still trying to make that request
35
00:02:41,430 --> 00:02:42,470
to the comments and.
36
00:02:42,870 --> 00:02:48,610
It's not actually using the list of comments that is embedded inside of your automatically so we still
37
00:02:48,610 --> 00:02:53,790
have a quick change or two to make back inside my editor I'm going to remove the console log that we
38
00:02:53,780 --> 00:03:01,560
just added I'll then go down to rendered posts remember rendered post is where we iterated over the
39
00:03:01,560 --> 00:03:07,970
list of posts so we got back inside that response and we built up a separate card out of each one we
40
00:03:07,970 --> 00:03:14,950
then eventually redid an instance of the comment list component when we create a comment list we passed
41
00:03:14,950 --> 00:03:19,690
down just the idea the poster we're currently looking at and then it was up to comment list to make
42
00:03:19,720 --> 00:03:26,500
a follow up request and get all the comments associated with that post I.D. That is no longer necessary
43
00:03:26,890 --> 00:03:33,090
we now have all the comments that we need directly inside of this post that we are iterating over to
44
00:03:33,190 --> 00:03:37,870
rather than passing down d post idea to comment list we'll just pass down the list of comments directly
45
00:03:39,100 --> 00:03:48,250
it's all delete that post I did thing and replace it with comment or see me comments is post that comments.
46
00:03:48,550 --> 00:03:50,020
We've already got the list of comments.
47
00:03:50,020 --> 00:03:54,190
We'll just pass them down directly and then leave it up to comment list to iterate over that list and
48
00:03:54,190 --> 00:03:55,390
render them out.
49
00:03:56,530 --> 00:03:58,170
I'll save this.
50
00:03:58,260 --> 00:04:04,480
I'm going to go over to my comment less component now years comment list and then remember comment list
51
00:04:04,510 --> 00:04:07,030
is currently making requests to get all that data.
52
00:04:07,030 --> 00:04:11,060
We're all that list comments no longer necessary at all.
53
00:04:11,230 --> 00:04:20,810
So we can delete that states or you state called We can delete batch data and we can delete yousee fact
54
00:04:24,510 --> 00:04:28,460
all clean up the import statements at the top so we no longer need access.
55
00:04:28,470 --> 00:04:31,110
We no longer need using state or use effect
56
00:04:34,220 --> 00:04:37,600
and then in our props list right here we we're no longer receiving post I.D..
57
00:04:37,610 --> 00:04:43,210
Instead we just received the list of comments it turns out that all the other codes we have inside of
58
00:04:43,210 --> 00:04:44,860
here is going to work just fine.
59
00:04:44,980 --> 00:04:51,040
So we take the comments we receive as a prop we're gonna map them we generate an ally for each one and
60
00:04:51,040 --> 00:04:58,360
then render those allies inside of a well let's go ahead and save this put back where the browser and
61
00:04:58,360 --> 00:04:59,610
see how we're doing.
62
00:04:59,950 --> 00:05:04,600
So I can now refresh the page you'll notice I still see my post right here at the Associated comment
63
00:05:05,590 --> 00:05:11,310
but I only had to make that one single request over to the query service we can still continue to try
64
00:05:11,310 --> 00:05:17,680
to make new posts and comments and whatnot so I'll put in a third post refresh the page and I'll put
65
00:05:17,680 --> 00:05:25,390
in a third comment and submit that and refresh and there we go.
66
00:05:25,390 --> 00:05:30,780
We've got our second post second comment and third post with third comment well I'd say if this worked
67
00:05:30,780 --> 00:05:36,050
out pretty well we have now introduced a brand new service into our application.
68
00:05:36,050 --> 00:05:44,250
It is consuming events from these other services and it's using those events to populate some internal
69
00:05:44,250 --> 00:05:45,670
store of data.
70
00:05:45,670 --> 00:05:50,280
And we did all this to make sure that we can minimize the number of requests are required but more importantly
71
00:05:50,340 --> 00:05:55,500
this really is a demonstration of how you can do some cross service communication.
72
00:05:55,500 --> 00:05:57,680
There's something really interesting about this approach.
73
00:05:57,680 --> 00:06:02,550
Remember I laid out a couple of big benefits to this approach a while ago back in this diagram back
74
00:06:02,550 --> 00:06:08,340
over here I said Hey our career service is not going to have any dependencies like direct dependencies
75
00:06:08,370 --> 00:06:09,570
on other services.
76
00:06:09,750 --> 00:06:10,770
So why is that good.
77
00:06:10,770 --> 00:06:12,190
Well watch this.
78
00:06:12,330 --> 00:06:17,600
If we go back over to our terminal we can now kill a 100 percent.
79
00:06:17,650 --> 00:06:23,260
The comment service that's the comment service and we can destroy the post service as well so we can
80
00:06:23,260 --> 00:06:27,210
pretend that those two services just crashed for who knows what reason.
81
00:06:27,250 --> 00:06:30,900
But you know what our query service is still running just fine.
82
00:06:31,120 --> 00:06:36,210
So we can still serve up data to users of our application without any issue whatsoever.
83
00:06:36,210 --> 00:06:37,370
But I can refresh this.
84
00:06:37,390 --> 00:06:43,090
I still see my data up here if I try to create new posts I will of course get an error because that
85
00:06:43,100 --> 00:06:48,430
post service which is in charge of creating posts is not running but I still have a major portion of
86
00:06:48,430 --> 00:06:54,010
my application running successfully and that's all what this independent idea of independent services
87
00:06:54,070 --> 00:06:54,820
is about.
88
00:06:54,820 --> 00:06:56,380
We can have some services crash.
89
00:06:56,410 --> 00:07:02,690
Others are still working and in general maybe our application will still be in a very usable state all
90
00:07:02,690 --> 00:07:02,930
right.
91
00:07:02,960 --> 00:07:03,880
So this looks good.
92
00:07:03,990 --> 00:07:08,690
But I do want to add in one last feature to this application we'll take a quick pause right here and
93
00:07:08,690 --> 00:07:09,560
I'll see you in just a minute.
10606
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.