WEBVTT 00:00.810 --> 00:01.170 All right. 00:01.170 --> 00:08.160 So right now in our system, the only way for incoming requests to enter our application is through 00:08.160 --> 00:13.640 our reservations microservice and specifically in the reservations controller. 00:13.650 --> 00:20.340 We of course have all of our Crud methods which are exposing all of our reservation Crud functionality. 00:20.370 --> 00:26.820 We also of course have our auth controller, which is going to be exposing basic login and the user's 00:26.820 --> 00:28.560 controller to create users. 00:28.560 --> 00:35.510 And this is all being exposed through Http, Http and this is all being exposed through rest APIs. 00:35.520 --> 00:42.570 However, I want to show you how we can build an API gateway using GraphQL and Apollo Federation so 00:42.570 --> 00:48.990 that we can stitch together all of our different microservices and expose any endpoint we want regardless 00:48.990 --> 00:52.440 of the microservice or the transport layer that's being used. 00:52.440 --> 01:00.430 So we'll be able to expose endpoints in our reservations, auth and payments, microservice using one 01:00.430 --> 01:05.980 microservice and to the end user, there's only going to be one endpoint that they need to use to be 01:05.980 --> 01:11.590 able to access all of these different microservices and they're all going to be combined together in 01:11.590 --> 01:17.920 our API gateway, which is really going to simplify things and make it very easy for us to expose external 01:17.920 --> 01:20.080 facing functionality in our app. 01:20.200 --> 01:27.310 So let's go ahead and set up GraphQL Apollo Federation so that we can expose all of our microservices 01:27.310 --> 01:30.160 over a common GraphQL microservice. 01:30.160 --> 01:38.860 So before we get started, as usual, I'm going to keep all of the code for this GraphQL API gateway 01:38.860 --> 01:42.880 implementation on a separate branch called GraphQL. 01:42.880 --> 01:49.300 So if you would like to see the completed version of this GraphQL implementation, please check out 01:49.300 --> 01:51.310 to the Branch GraphQL. 01:51.730 --> 01:55.420 However, I'm going to switch back to the main branch and continue working. 01:55.420 --> 02:03.870 So our first step is going to be using the CLI to generate a new app that we will call Gateway. 02:03.870 --> 02:07.020 So let's go ahead and generate this gateway app. 02:07.020 --> 02:14.130 And you can see here that we have generated this new microservice with the basic gateway controller 02:14.220 --> 02:22.650 and of course our nest CLI Json has been updated to generate this gateway application. 02:22.650 --> 02:27.090 Now that we have the gateway created, let's go ahead and install the dependencies. 02:27.090 --> 02:31.890 We're going to need to set up our GraphQL Apollo Federation server. 02:31.890 --> 02:37.950 Now I'll leave some useful links if you want to learn more about GraphQL or Apollo Federation. 02:37.980 --> 02:45.180 Essentially, Apollo Federation is going to allow us to stitch together multiple different GraphQL microservices 02:45.180 --> 02:51.690 into one common GraphQL microservice so that we only need to expose that one endpoint to the user, 02:51.720 --> 02:55.860 even though the underlying microservices will be completely separate. 02:55.860 --> 02:59.520 So Apollo Federation is going to make this very easy to do. 02:59.520 --> 03:03.100 And like I said, I'll leave some links if you want to learn more about this. 03:03.100 --> 03:06.070 However, let's go ahead and get started with setting this up. 03:06.070 --> 03:12.370 So we're going to go ahead and NPM install dash dash, save a number of dependencies. 03:12.370 --> 03:19.480 So let's go ahead and install Apollo slash gateway, Apollo slash server. 03:20.790 --> 03:24.060 Apollo slash subgraph. 03:26.080 --> 03:35.200 Nestjs, Apollo Nestjs GraphQL, and finally GraphQL itself. 03:35.980 --> 03:39.400 Let's go ahead and let these dependencies finish installing. 03:40.120 --> 03:40.570 All right. 03:40.570 --> 03:46.810 So there's some dependencies that you can see here that we actually need to update since we're using 03:46.810 --> 03:50.730 these versions of Apollo and GraphQL. 03:50.740 --> 03:56.080 So you can reference my Package.json to see the current versions I'm using. 03:56.080 --> 04:01.390 And on these versions that we're using, we're going to actually have to upgrade our current version 04:01.390 --> 04:02.680 of Nestjs. 04:02.680 --> 04:06.480 So let's go ahead and do that for Nestjs Common. 04:06.490 --> 04:10.870 I am going to upgrade to the latest version available as of this video. 04:11.170 --> 04:14.650 In my case, this is going to be ten .1.3. 04:14.920 --> 04:24.490 We'll go ahead and also update Nestjs core to ten .1.3 and the same thing for Platform Express so that 04:24.490 --> 04:26.170 we're all on the same version. 04:26.170 --> 04:33.190 And to stay consistent, we'll go ahead and upgrade our dev dependency of nestjs CLI to the latest of 04:33.190 --> 04:34.560 ten 1.11. 04:34.570 --> 04:41.740 We'll upgrade nestjs schematics to the latest of ten .0.2 and nestjs testing. 04:41.740 --> 04:44.650 I will go ahead and upgrade to ten .1.3. 04:44.680 --> 04:52.270 So now that we've upgraded to the latest version of Nestjs, let's go ahead and run a NPM install dash 04:52.270 --> 04:57.880 r to go ahead and install all of the dependencies recursively in our project. 04:59.270 --> 05:04.850 Okay, so if all the dependencies we need set up, let's go into our docker, compose where we will 05:04.850 --> 05:11.750 expose our new gateway microservice and set everything up so that we can run it properly using Docker. 05:11.750 --> 05:18.320 So we want to add a new service here called Gateway to represent our GraphQL Gateway microservice. 05:18.500 --> 05:25.310 So let's go ahead and just copy the existing notification service and paste it in. 05:25.430 --> 05:34.460 We'll simply change the name to Gateway and let's change the Docker file path to app slash gateway slash 05:34.460 --> 05:35.420 Docker file. 05:36.070 --> 05:40.420 And then we can change the Start command to be gateway. 05:40.600 --> 05:44.410 Change the file path to be in the gateway folder. 05:44.560 --> 05:49.120 And now we have everything we need to run the gateway application. 05:49.120 --> 05:56.740 So let's go ahead and set up the Gateway app by firstly creating a Docker file inside of the gateway 05:56.740 --> 06:00.760 folder so that we can actually build and run this container. 06:00.760 --> 06:06.940 Now, finally, we need to make sure that we add a port section to the gateway so that we will be exposing 06:06.940 --> 06:12.250 the GraphQL server that will be running on our port to our local machine. 06:12.250 --> 06:20.710 So let's expose Port 3004 to our local machine 3004, and I'll go ahead and apply quotes to this ports 06:20.710 --> 06:21.700 definition. 06:22.380 --> 06:30.570 I'll simply go ahead and copy the Docker file from the auth microservice and paste it in and we can 06:30.570 --> 06:33.300 simply change out a few things in here. 06:33.330 --> 06:41.820 So we will change the copy command on line 12 to copy app slash gateway into app slash gateway. 06:42.510 --> 06:47.640 We'll change the run build command to run build Gateway. 06:48.030 --> 06:54.210 And finally, for the actual command to start the microservice, we will change the path to be in dist 06:54.210 --> 06:57.420 apps gateway slash main. 06:57.570 --> 07:02.760 And we can check to see here that we have no more references to auth and everything has been refactored 07:02.760 --> 07:05.640 to work with our gateway microservice. 07:05.820 --> 07:11.670 Finally, let's go ahead and create a dot m file in the gateway folder. 07:12.420 --> 07:18.120 And now let's go ahead and run Docker, compose up and specify. 07:18.120 --> 07:20.280 We want to up the Gateway service. 07:20.310 --> 07:25.840 If it's your first time starting the Gateway Service, you should see the Docker file, build your container 07:25.840 --> 07:29.530 and then we will start up with our next command here. 07:29.890 --> 07:30.190 All right. 07:30.190 --> 07:34.660 So now we can see that the Gateway application has successfully started. 07:34.690 --> 07:37.660 Let's go ahead and start refactoring our gateway. 07:37.690 --> 07:45.940 So firstly, in our main.ts, we want to make sure we have our config module set up as usual and listen 07:45.940 --> 07:49.720 on the port environment variable that we will set in the env. 07:49.870 --> 07:56.530 So let's open up the gateway module and in our imports array, let's make sure we import the config 07:56.530 --> 08:03.970 module from nestjs config call for route and we'll set the is global to true so that the config module 08:03.970 --> 08:05.530 will be globally available. 08:05.800 --> 08:09.640 Next we'll add the logger module from. 08:10.650 --> 08:17.490 Apps common to make sure we have our common logger in place and now we can go to the main.ts. 08:17.520 --> 08:22.800 So let's firstly go ahead and set up our logger as we normally have done. 08:22.800 --> 08:31.170 So we'll call app dot, use logger and then we'll call app dot get and then get the logger from Nestjs 08:31.200 --> 08:31.680 piano. 08:31.710 --> 08:39.540 Next up, let's get the config service from the app dot get and we'll pass in the config service. 08:39.540 --> 08:47.340 So now we have the config service from nestjs config and then we can make sure we're listening on the 08:47.340 --> 08:54.180 port from config service dot get or throw and get the port from our m file. 08:54.390 --> 09:00.120 So now in our dot env I'll add a new port and set it equal to 3004. 09:00.300 --> 09:09.180 So now if we go ahead and restart our gateway, we should see that it starts back up on port 3004. 09:09.210 --> 09:11.890 Okay, so our application has started up. 09:11.890 --> 09:15.820 Now I'll go ahead and remove all of our unused files from the gateway. 09:15.850 --> 09:20.530 We don't need the gateway controller or the Gateway service. 09:20.530 --> 09:25.150 We're actually only going to be utilizing the Gateway module because this is where we're going to be 09:25.150 --> 09:33.340 setting up our GraphQL Apollo Server and exposing all of our other GraphQL microservices so we can remove 09:33.340 --> 09:38.290 these imports and the references to these files in our Gateway module. 09:38.320 --> 09:43.900 All right, so let's go ahead and set up our GraphQL server in the Gateway to do this. 09:43.900 --> 09:51.310 We'll go ahead and call GraphQL module dot for root async. 09:51.960 --> 09:57.200 And then we're going to pass in the current driver configuration that we're going to be utilizing. 09:57.210 --> 10:05.280 So in our case, we're going to be using the Apollo Gateway driver config and now we can open up. 10:06.020 --> 10:13.460 Parentheses and provide an options object where we firstly need to specify the driver that we're going 10:13.460 --> 10:14.710 to be utilizing. 10:14.720 --> 10:23.350 So let's specify the driver we're using and our case we're using the Apollo gateway driver from Nestjs 10:23.390 --> 10:24.170 Apollo. 10:24.200 --> 10:32.030 Now we can set up the rest of our GraphQL module using our asynchronous use factory where we can inject 10:32.030 --> 10:35.330 our config service as we would normally do. 10:35.330 --> 10:42.200 So let's go ahead and inject the config service and expose the options that the rest of the GraphQL 10:42.200 --> 10:43.670 module expects. 10:43.760 --> 10:51.410 And then we'll make sure we inject the config service so that it's available in the use factory. 10:51.440 --> 10:57.890 So to configure the rest of our GraphQL microservices that this gateway will be exposing, we're going 10:57.890 --> 11:00.800 to use the gateway property. 11:00.800 --> 11:06.110 And in here we have another property called Supergraph SDL. 11:06.110 --> 11:15.110 So this is going to be the map of all of the other subgraphs or other GraphQL microservices that the 11:15.110 --> 11:18.590 gateway will be proxying off requests to. 11:18.590 --> 11:25.370 So we need to tell the Gateway GraphQL module where these other microservices are listening on so that 11:25.370 --> 11:32.390 when a user visits our GraphQL server on the Gateway, they have access to all of the underlying GraphQL 11:32.390 --> 11:34.790 servers that we will be exposing here. 11:34.790 --> 11:36.490 So let's go ahead and do that. 11:36.500 --> 11:45.650 To do this, we'll set this property equal to new Introspect and compose from Apollo slash Gateway. 11:45.860 --> 11:53.000 And in here we'll pass in an options object where we now specify the subgraphs that I mentioned. 11:53.000 --> 12:00.590 So this is going to be an array of subgraphs or other GraphQL microservices that we want to stitch together 12:00.590 --> 12:05.030 and form a master graph that will be exposed to the user. 12:05.330 --> 12:11.370 So let's go ahead and do that by setting up our first GraphQL microservice that we want to expose. 12:11.400 --> 12:15.750 Now of course we don't have any yet, but we'll start off with the reservations. 12:15.750 --> 12:22.830 Microservice So let's go ahead and firstly provide the name of the service that we want to expose or 12:22.830 --> 12:23.550 the graph. 12:23.550 --> 12:33.000 In this case we'll call it reservations, and then we simply specify the URL of where that GraphQL server 12:33.000 --> 12:34.500 is going to be running on. 12:34.500 --> 12:40.650 So in our case, we can actually pull this from the config service, we'll call it config service dot 12:40.650 --> 12:47.940 get or throw and get the reservations GraphQL URL. 12:48.090 --> 12:54.960 So now this is all we have to do to set up our GraphQL server and stitch together our reservations. 12:54.960 --> 13:00.630 GraphQL Microservice, which like I said, doesn't exist yet, but we'll handle that next. 13:00.810 --> 13:05.910 So let's go ahead and specify this in the dot env before we forget. 13:05.910 --> 13:09.030 So we need to set up the reservations. 13:09.390 --> 13:20.190 GraphQL URL and this is going to be equal to Http because it's going to be an Http server of the reservation 13:20.190 --> 13:25.290 service and we give it the host name, which of course we know since we're running in Docker, it's 13:25.290 --> 13:29.130 going to be the name we specify in our Docker compose file. 13:29.130 --> 13:36.000 So in our case it's the reservation service and then it's simply the Http server will be running on. 13:36.000 --> 13:39.060 So we know if we go to reservations. 13:39.920 --> 13:44.360 That we are listening on Port 3000. 13:44.360 --> 13:51.380 So we're simply just targeting the Http server that's already exposed and reservations on Port 3000. 13:51.380 --> 13:58.640 And when we set up our GraphQL server on reservations, it's going to be listening by default on slash 13:58.640 --> 13:59.870 GraphQL. 13:59.990 --> 14:02.300 So let's go ahead and save this file. 14:02.300 --> 14:06.860 And now we have everything we need to expose our reservations. 14:06.860 --> 14:08.420 GraphQL Microservice. 14:08.450 --> 14:13.280 Let's go ahead and actually set this up in the reservations, Microservice.