WEBVTT 00:00.380 --> 00:00.710 Okay. 00:00.710 --> 00:08.270 So our first step to add GraphQL to our reservations, microservice will be to open up the reservations 00:08.270 --> 00:11.330 module and in our imports array. 00:11.360 --> 00:20.630 Let's go ahead and add a new import to the GraphQL module from Nestjs slash GraphQL and we're going 00:20.630 --> 00:22.280 to call for Route on it. 00:22.610 --> 00:27.770 We can then pass in the options or the config that will be supplying. 00:27.770 --> 00:33.620 In this case, it's going to be the Apollo Federation driver config. 00:33.890 --> 00:40.370 And then let's open up an options object where we're going to specify two properties. 00:40.370 --> 00:43.250 So the first will be the driver that we're using. 00:43.250 --> 00:48.890 So this will be the Apollo Federation driver from Nestjs slash Apollo. 00:49.160 --> 00:55.370 And then we're going to specify auto schema file equal to an object. 00:55.410 --> 01:02.090 We're going to set federation equal to two because we're going to be using Federation version two. 01:02.090 --> 01:08.660 And what does auto schema file is going to do is it's going to automatically generate the GraphQL schema 01:08.660 --> 01:10.460 from our code. 01:10.460 --> 01:17.360 So when we set up the GraphQL types in our code, they're automatically going to be converted into a 01:17.360 --> 01:22.160 GraphQL schema that GraphQL understands and there's nothing else we're going to have to do. 01:22.190 --> 01:27.770 This is automatically going to be happening for us since we set this property. 01:27.860 --> 01:34.160 So next up, we're ready to add our first resolver to our reservation service, which is going to be 01:34.160 --> 01:38.570 the equivalent of an Http controller in the GraphQL world. 01:38.570 --> 01:46.250 So the resolver is going to be the list of mutations in queries that we're going to expose in our schema 01:46.250 --> 01:50.930 and that users can call using GraphQL into our system. 01:50.930 --> 01:54.230 So let's go ahead and create this in the source folder. 01:54.230 --> 01:58.580 We'll create a reservations dot resolver, dot ts. 01:58.940 --> 02:04.140 Now let's add the at resolver decorator from Nestjs GraphQL. 02:04.200 --> 02:10.500 And now we need to specify the entity that we're returning from this resolver. 02:10.500 --> 02:17.670 And this is going to be added to our GraphQL schema automatically based off of what we supply here. 02:17.670 --> 02:25.260 So let's open up an anonymous function where we return the entity that is going to be used in this resolver. 02:25.260 --> 02:33.240 So in our case, we are going to be working with the reservation document in our models folder. 02:33.690 --> 02:38.550 Then we'll go ahead and export a class called Reservations Resolver. 02:42.320 --> 02:49.370 Let's go ahead and add a constructor where we will inject the reservations service. 02:53.460 --> 02:59.690 And now we're ready to set up our mutations and queries on the reservation. 02:59.700 --> 03:05.760 So let's go ahead and start off with a mutation which is going to be an operation that mutates the data 03:05.760 --> 03:08.310 by creating or updating the entity. 03:08.340 --> 03:16.890 So we specify this with the at mutation decorator from Nestjs GraphQL, and then we specify the type 03:16.890 --> 03:18.990 that we're returning from this mutation. 03:18.990 --> 03:22.230 In our case, we know it's the reservation document. 03:22.260 --> 03:27.720 We'll go ahead and create a new method here called Create Reservation. 03:29.100 --> 03:35.580 And importantly, the name of the method that we define here is going to be the name of the mutation 03:35.580 --> 03:38.100 in the GraphQL schema. 03:38.100 --> 03:43.020 So I want to keep this the same name, create reservation here so we can leave this as is. 03:43.050 --> 03:51.300 Next up, let's specify the arguments that we expect so we can use the at args decorator from Nestjs 03:51.300 --> 03:55.930 GraphQL and extract out the arguments that are coming in. 03:55.930 --> 04:00.400 In our case, we'll call it the Create reservation input. 04:01.060 --> 04:07.330 Now we know this is going to be the create reservation input and the type of this will be the create 04:07.330 --> 04:10.630 reservation DTO that we already have set up. 04:10.780 --> 04:16.720 So there will be a bit of work we have to do to convert the DTO and the reservation document to types 04:16.720 --> 04:18.670 that GraphQL understands. 04:18.820 --> 04:26.290 Next up, we need to make sure that we extract the current user so we can get the current user decorator 04:26.290 --> 04:28.750 from app slash common. 04:28.750 --> 04:35.530 And there will also be some work that we have to do to convert the current user decorator to work with 04:35.530 --> 04:36.490 GraphQL. 04:36.490 --> 04:38.110 We'll do this later on. 04:38.110 --> 04:45.280 For now, let's make sure we extract the user of type user DTO So now that we have the parameters we 04:45.280 --> 04:52.270 need to create the reservation, we will simply return this dot reservation service dot create pass 04:52.270 --> 04:56.410 in the create reservation input and the user. 04:56.620 --> 05:00.220 So now we have our mutation set up to create a reservation. 05:00.220 --> 05:10.120 Let's go ahead and add a query using the query decorator and it will specify this method will return 05:10.120 --> 05:13.180 an array of reservation documents. 05:13.180 --> 05:19.120 And then additionally, I want to explicitly specify the name for this query and simply call the name 05:19.120 --> 05:21.370 of it reservations. 05:21.640 --> 05:26.110 That's because the method I want to name this will be find all. 05:26.140 --> 05:32.830 However, I don't want the GraphQL schema query to be called find all so we can explicitly override 05:32.830 --> 05:41.080 this by providing the name here and importantly, make sure that the query decorator is imported from 05:41.080 --> 05:44.530 Nestjs GraphQL and not Nestjs common. 05:45.280 --> 05:51.220 You can see here the name property will override the name of the query, which is what we want to do. 05:51.220 --> 05:58.880 And now we'll simply return this dot reservation service dot find all with no parameters needed. 05:58.900 --> 06:03.370 Next up, let's specify a query to find a single reservation. 06:03.370 --> 06:09.760 So we'll use the same query decorator and simply specify where returning a single reservation document. 06:09.790 --> 06:14.770 Now I'll specify the name of this query will just be reservation. 06:15.940 --> 06:23.320 And now we will have a find one method and we will get access to the at args here and now. 06:23.320 --> 06:29.290 Instead of specifying an explicit dto file for the args, we can do this inline. 06:29.290 --> 06:35.410 We'll firstly specify the name of the arguments or the property in this case which will be called ID, 06:36.040 --> 06:38.320 and then we'll specify the type. 06:38.320 --> 06:45.760 So we can do this by saying type property and return the type of this argument here. 06:45.760 --> 06:53.080 In this case the ID will be a string and now we can specify the ID parameter of type string. 06:53.830 --> 07:01.810 Now we'll return this dot reservation service, find one and pass in the ID to that method to find a 07:01.810 --> 07:03.880 single reservation by ID. 07:04.540 --> 07:09.280 Finally, we have the mutation to remove a reservation. 07:09.280 --> 07:15.970 So let's go ahead and specify that we will still return a reservation document from this mutation and 07:15.970 --> 07:19.510 we'll call this method remove reservation. 07:20.600 --> 07:26.210 I'll get the same argument as find one so we can actually just copy this because we're also going to 07:26.210 --> 07:35.750 be passing in an ID to remove the reservation by ID and then we can simply return this reservation service 07:35.750 --> 07:38.480 dot remove and pass in our ID. 07:40.430 --> 07:46.910 So now we've fully set up our reservations resolver to be able to implement our Crud methods on our 07:46.910 --> 07:48.770 reservation documents. 07:48.890 --> 07:54.950 Let's go ahead and update our reservation document with a necessary decorators so that Nestjs will actually 07:54.980 --> 07:59.120 find this class and add it to our GraphQL schema. 07:59.600 --> 08:06.890 So to do this, we're going to decorate it with the object type decorator to mark it as a GraphQL type. 08:07.310 --> 08:14.090 And then we simply need to decorate each of these fields with the at field decorator to mark them as 08:14.090 --> 08:15.910 part of this schema. 08:15.920 --> 08:21.920 So we'll go ahead and make sure we add the field decorator to all of these properties. 08:24.060 --> 08:30.060 Now we've updated our reservation document to be compatible with GraphQL so that it will be added to 08:30.060 --> 08:30.960 our schema. 08:30.990 --> 08:37.170 We need to also go to our abstract document in our Libs common folder and do the same thing for the 08:37.170 --> 08:43.590 abstract document here so that we can expose the underscore ID property as part of our schema as well. 08:43.920 --> 08:49.980 So to do this we're going to add the Add object type decorator again, and then we're also going to 08:49.980 --> 08:57.300 specify an options object where we specify that this will be abstract so that this type won't be registered 08:57.300 --> 08:58.950 in our schema by itself. 08:58.950 --> 09:05.150 It will just be inherited in other GraphQL schema types like our reservation document. 09:05.160 --> 09:13.050 So let's go ahead and mark it as abstract and then we'll specify the Add field decorator from Nestjs 09:13.050 --> 09:14.280 GraphQL again. 09:14.280 --> 09:20.970 So by default, we didn't have to specify a type for any of our other fields in our reservation document. 09:20.970 --> 09:26.680 And that's because Nestjs and GraphQL will pick up on the type of these properties and we'll use that 09:26.680 --> 09:30.130 same type to mark these properties as that type. 09:30.130 --> 09:32.740 So for example, our dates and strings. 09:32.740 --> 09:39.070 However, in the abstract schema we know that this object ID won't be an object ID when it's sent over 09:39.070 --> 09:41.110 the wire, it will be a string. 09:41.110 --> 09:48.160 So to mark this explicitly as a string, we can specify the type by using an anonymous function here 09:48.160 --> 09:50.620 that returns the type. 09:50.620 --> 09:55.330 In this case, we know that this will be a string when it's returned from our server. 09:56.560 --> 10:05.170 So finally, let's go back to our Create Reservation DTO and update this to be compatible with GraphQL. 10:05.170 --> 10:12.760 So we'll add another decorator to this DTO and instead of object type, we'll mark this with an input 10:12.790 --> 10:20.260 type to mark it as an input type in GraphQL, which is going to be how we supply arguments to our GraphQL 10:20.290 --> 10:21.100 calls. 10:21.610 --> 10:28.300 We'll then go ahead and mark all the properties we want to expose with the Add field decorator, just 10:28.300 --> 10:29.650 like we've done before. 10:30.580 --> 10:34.450 And let's go ahead and do the same thing for the Create charge. 10:34.450 --> 10:41.110 DTO here we need to specify the actual type that gets returned because Nestjs won't be able to pick 10:41.110 --> 10:43.930 up on non primitive types like this. 10:43.930 --> 10:45.160 Create charge DTO. 10:45.160 --> 10:51.970 So we need to explicitly specify that the type here is of create charge DTO So now let's make sure we 10:51.970 --> 10:58.750 go into the create charge DTO and update the create charge DTO so that it's also part of our schema. 10:58.750 --> 11:02.830 So we'll have the input type decorator on this DTO as well. 11:03.160 --> 11:10.510 We'll mark the card DTO with an app field decorator where we specify that it is of type card DTO and 11:10.510 --> 11:14.470 we'll mark the amount field with just a add field decorator. 11:14.560 --> 11:19.960 Now finally we'll go into the card DTO and repeat the same exercise. 11:19.960 --> 11:23.140 So we want to add this as part of our GraphQL schema. 11:23.170 --> 11:29.380 We'll mark it with the Add input type decorator and go ahead and mark the rest of these fields with 11:29.380 --> 11:34.450 the Add field decorator so that they are also part of our GraphQL schema. 11:36.340 --> 11:43.210 So our final step is going to be to go into the reservations module and in our providers array, make 11:43.210 --> 11:49.870 sure we actually register the new reservations resolver so that it gets registered. 11:49.870 --> 11:55.780 And in doing this, all of the associated types in the resolver, like the reservation document that 11:55.780 --> 12:03.250 we decorated with the GraphQL decorators and the DTOs we just updated will get registered in our GraphQL 12:03.250 --> 12:08.170 schema thanks to the auto schema file property that we specified earlier. 12:08.770 --> 12:16.420 Now finally we have a typo in our Create reservation method, so make sure we've spelt create reservation 12:16.420 --> 12:17.320 properly.