WEBVTT

1
00:00.680 --> 00:02.180
Hi everyone.

2
00:02.180 --> 00:13.700
In this video let me show you how we can not write this code and also achieve the goal of return the

3
00:13.700 --> 00:15.320
response DTO

4
00:16.190 --> 00:24.650
Okay, so if you remember we have a concept of the interceptor.

5
00:24.800 --> 00:31.040
Now let me reminder for you what is interceptor now?

6
00:31.040 --> 00:41.030
The first way is before the request, right before the request.

7
00:41.030 --> 00:45.560
And here will be before the response, okay.

8
00:46.040 --> 00:53.870
Before the controller return the result into the client, this will be the interceptor.

9
00:53.870 --> 00:58.160
And you can see it's very similar with my DTO.

10
00:58.190 --> 01:00.320
Right?

11
01:00.320 --> 01:04.400
I want it is before it returns the client.

12
01:04.850 --> 01:09.470
It will convert the DTO right here inside the interceptor.

13
01:09.500 --> 01:10.220
Right here.

14
01:10.280 --> 01:12.770
So that's what we want right now.

15
01:14.690 --> 01:17.420
And let me show you how we can do that.

16
01:17.480 --> 01:23.270
So let me copy the code from interceptor right here because I never remember.

17
01:23.300 --> 01:23.780
That code

18
01:27.200 --> 01:27.530
Okay.

19
01:27.530 --> 01:31.040
I will create the in the interceptors

20
01:31.790 --> 01:32.780
And I will name.

21
01:33.800 --> 01:35.900
Sorry, interceptors

22
01:37.340 --> 01:39.590
And I will use the name.

23
01:39.590 --> 01:40.400
Will be.

24
01:42.470 --> 01:45.080
ConvertDTO

25
01:47.990 --> 01:48.350
post

26
01:50.960 --> 01:54.830
Or transform-dto

27
01:54.860 --> 02:08.090
.interceptor.ts okay, paste it right here and save that to format the code, and change the name into the

28
02:09.110 --> 02:12.500
TransformInterceptor

29
02:13.190 --> 02:17.270
And I don't want to write the code "before".

30
02:17.300 --> 02:17.750
Okay.

31
02:17.780 --> 02:21.710
I only care about the after.

32
02:22.220 --> 02:22.730
Okay.

33
02:23.210 --> 02:27.110
In this case, we care about here.

34
02:28.070 --> 02:28.430
Okay.

35
02:28.850 --> 02:29.840
That's what we care.

36
02:29.990 --> 02:38.810
So I will remove the before, remove the now, I don't need it and I will remove here.

37
02:45.140 --> 02:53.750
So the tap right here is also from the rxjs

38
02:55.460 --> 03:00.890
And, but anyway let me show show you how we can do that.

39
03:00.920 --> 03:03.020
Firstly I will change them.

40
03:03.530 --> 03:08.480
I will not do the tap because I will give you the map right now.

41
03:09.140 --> 03:10.460
I will use the map method.

42
03:14.300 --> 03:14.840
I'm sorry.

43
03:16.280 --> 03:16.940
Change the map.

44
03:18.170 --> 03:18.530
So

45
03:18.530 --> 03:23.690
The map right here is similar with the map from the.

46
03:25.730 --> 03:28.400
From the JavaScript inside the array.

47
03:30.890 --> 03:31.940
So we will.

48
03:31.970 --> 03:39.830
We will convert the some input inside the output and the the purpose of the map.

49
03:42.170 --> 03:45.590
And it will expect the argument.

50
03:45.710 --> 03:47.600
The first argument will be the data.

51
03:48.650 --> 03:53.060
And the second argument I will return.

52
03:56.510 --> 03:57.890
Let's stay stune with me.

53
03:57.920 --> 04:00.080
I will return something call.

54
04:00.320 --> 04:03.290
plainToInstance

55
04:03.320 --> 04:07.160
This plainToInstance right here from the class transformer.

56
04:07.310 --> 04:11.510
And now let's make it work.

57
04:11.990 --> 04:15.620
And I will explain for you what actually happened right now.

58
04:15.650 --> 04:21.140
I will typo the ResponsePostDTO

59
04:21.770 --> 04:24.860
And the second argument will be the data.

60
04:26.780 --> 04:27.230
Okay.

61
04:27.710 --> 04:30.650
That's the firstly I will show you.

62
04:31.940 --> 04:37.220
And inside the post controller if I use the.

63
04:40.730 --> 04:46.460
UseInterceptor and I will use the Transform

64
04:50.600 --> 04:57.710
TransformDTO

65
04:57.710 --> 05:02.390
Interceptor or actually TransformDTOInterceptor?

66
05:02.930 --> 05:03.470
Okay.

67
05:06.740 --> 05:07.760
How will you use that?

68
05:08.360 --> 05:11.660
And let's see inside the get all

69
05:11.660 --> 05:15.620
I will remove everything here.

70
05:16.040 --> 05:20.750
I will remove and I only return the post

71
05:21.830 --> 05:30.650
And I will not use the promise right now, because the converts into the "Response" only take care by the

72
05:30.650 --> 05:31.550
interceptor.

73
05:31.820 --> 05:37.610
And that's for the job of the interceptor right here, from the controller.

74
05:37.880 --> 05:42.170
For that reason, we will not use the promise anymore.

75
05:46.760 --> 05:49.430
Now let me see how I can get posts.

76
05:49.460 --> 05:54.230
If I say you can say it returned for me something like this.

77
05:55.040 --> 05:56.930
And that's not what we want.

78
05:57.410 --> 06:04.070
In order to make this work, we use the something inside the Serializer.

79
06:07.400 --> 06:14.660
We already have a @Exclude and we also have a property called @Expose.

80
06:15.260 --> 06:16.790
It's right here.

81
06:17.720 --> 06:22.010
So I will use @Expose inside the

82
06:24.410 --> 06:25.190
Response Post

83
06:25.280 --> 06:26.870
I will expose everything.

84
06:27.920 --> 06:33.860
This is the opposite with the @Exclude, right.

85
06:34.070 --> 06:37.250
So we want all of that can be exposed

86
06:37.250 --> 06:39.650
So I will pass @Expose right here.

87
06:40.160 --> 06:45.140
And the third argument I will use.

88
06:45.140 --> 06:48.920
true, exclude will be true

89
06:49.130 --> 06:54.140
To make the @Expose right here work

90
06:55.010 --> 06:56.600
And now let's see.

91
06:58.670 --> 07:00.350
If I return now.

92
07:01.100 --> 07:01.700
Very cool.

93
07:01.700 --> 07:02.120
Right.

94
07:02.780 --> 07:05.750
We already have data like this.

95
07:08.930 --> 07:13.010
And the what we want.

96
07:14.840 --> 07:18.950
So let me explain what actually happened.

97
07:18.980 --> 07:26.810
Right now you can see, firstly, I have the interceptor, right.

98
07:27.410 --> 07:32.480
And I have a map right here.

99
07:33.020 --> 07:37.100
Now let me discuss about what is inside the pipe over here.

100
07:37.190 --> 07:44.900
The pipe right here is will return after the controller return.

101
07:45.290 --> 07:49.100
So it will return before the controller return.

102
07:49.130 --> 07:51.440
A result like this, right?

103
07:51.470 --> 07:57.860
It means it will convert to DTO right here for me.

104
07:58.010 --> 07:58.430
Okay.

105
07:58.460 --> 08:07.310
This only take care after the pipe, and inside the pipe method, I will use the map and the map.

106
08:07.310 --> 08:11.780
It will convert the some input to some output.

107
08:12.050 --> 08:13.340
Okay, this is the input.

108
08:17.660 --> 08:19.970
Sorry, that is the output.

109
08:20.000 --> 08:20.570
Okay.

110
08:21.350 --> 08:22.340
My my bad.

111
08:24.110 --> 08:27.380
Now it will convert.

112
08:31.910 --> 08:35.570
Now instead the pipe we have a map

113
08:36.440 --> 08:40.190
And inside the map we have a data.

114
08:40.640 --> 08:43.310
So what is the data right now?

115
08:43.640 --> 08:45.560
Let me console.log.what is the data

116
08:54.050 --> 08:59.300
Now if I send and you will send it, have I have everything right here, it's mean.

117
09:01.640 --> 09:04.670
It mean when we use here.

118
09:06.020 --> 09:06.260
this?

119
09:06.260 --> 09:08.360
Here will be the data, right?

120
09:09.980 --> 09:16.370
All of that will be the "data" that is already been passed with the some item.

121
09:16.430 --> 09:17.150
Right?

122
09:17.420 --> 09:19.790
You can see all of that will be the data.

123
09:21.830 --> 09:29.180
And we will convert the data into the DTO.

124
09:29.900 --> 09:31.070
That's what we want.

125
09:31.760 --> 09:42.830
So in order to convert that, we use the some class transformer plainToInstance right here to convert

126
09:42.860 --> 09:43.670
the instance.

127
09:47.420 --> 09:47.840
Okay.

128
09:48.260 --> 09:52.250
To convert this data right here into "DTO".

129
09:53.060 --> 09:57.950
And make sure we pass the option to make sure.

130
10:00.050 --> 10:03.890
The response right here work with @Expose

131
10:04.820 --> 10:06.440
And that's the whole idea.

132
10:07.610 --> 10:09.410
So we can easily remove that.

133
10:09.440 --> 10:12.710
And right here we can easily remove it also.

134
10:12.740 --> 10:20.780
Work, if I return the post and I will not use the promise right now anymore?

135
10:21.170 --> 10:25.580
So let's see if I create a post.

136
10:29.630 --> 10:31.580
You can see it only the id

137
10:31.790 --> 10:33.620
title and description, right?

138
10:33.800 --> 10:34.460
Very cool.

139
10:35.900 --> 10:38.060
And that's it.

140
10:38.090 --> 10:40.850
How we can customize the response.

141
10:41.690 --> 10:45.710
Okay, but, we have one more downside.

142
10:48.260 --> 10:54.740
It's mean the ResponsePostDTO right here, because later I don't have a post anymore.

143
10:54.770 --> 10:55.940
I have a user.

144
10:56.180 --> 10:56.930
Right.

145
10:57.410 --> 11:02.990
So for that reason I will customize a little bit.

146
11:03.020 --> 11:05.330
So I will see you in the next one.