Nest JS Graphql with Apollo Federation Gateway for Microservices #part-2

tkssharma - May 29 '22 - - Dev Community

Building Graphql apollo federation using nestjs framework ๐Ÿš€ ๐Ÿš€

Github link
https://github.com/tkssharma/nestjs-with-apollo-federation-gateway

Everything we are talking here is in context of nestjs, You can write something using express or any other node js framework
We will use nestjs to build services which will expose graphql interface

apollo graphql gatway

Lets build apollo federation Gateway

nestjs graphql gateway

Guys, i have faced many challenged to build this example and repository and we still have a lot of mess created with nestjs/graphql versions with rest of the apollo ecosystems.

federation

These days we are only talking about microservice and with that how can we build distributed architecture.
Now a days GraphQL is becoming the preferred query language due to its flexibility. As we know microservices are difficult to work with. For example, how do you avoid multiple endpoints for users? One solution is to implement federation.

Before Federation came into picture we were doing those things with Schema stitching, we can just quickly check how both of these are different

Federation vs schema stitching

Schema stitching was the previous solution for microservice architecture. Both federation and schema stitching do offer the same functionality on the surface, gathering multiple services into one unified gateway, but the implementation is different.

With GraphQL federation, you tell the gateway where it needs to look for the different objects and what URLs they live at. The subgraphs provide metadata that the gateway uses to automatically stitch everything together. This is a low-maintenance approach that gives your team a lot of flexibility.

With schema stitching, you must define the โ€œstitchingโ€ in the gateway yourself. Your team now has a separate service that needs to be altered, which limits flexibility. The use case for schema stitching is when your underlying services are not all GraphQL. Schema stitching allows you to create a gateway connected to a REST API, for example, while federation only works with GraphQL.

So when should you use either one? Many will say that federation is the overall winner, as it allows teams to focus on their application without needing to maintain a gateway. But if you have different types of APIs, you have to go with schema stitching.

In our example we are going tot alk about Graphql Federation.
we can create a simple nestjs application using nest-cli
To get started, you can either scaffold the project with the Nest CLI, or clone a starter project (both will produce the same outcome).

To scaffold the project with the Nest CLI, run the following commands. This will create a new project directory, and populate the directory with the initial core Nest files and supporting modules, creating a conventional base structure for your project. Creating a new project with the Nest CLI is recommended for first-time users. We'll continue with this approach in First Steps.

$ npm i -g @nestjs/cli
$ nest new project-name
Enter fullscreen mode Exit fullscreen mode

Alternatives
Alternatively, to install the TypeScript starter project with Git:

$ git clone https://github.com/nestjs/typescript-starter.git project
$ cd project
$ npm install
$ npm run start
Enter fullscreen mode Exit fullscreen mode

Lets start by adding required dependencies

 "dependencies": {
    "@apollo/gateway": "0.46.0",
    "@nestjs/apollo": "9.2.4",
    "@nestjs/common": "8.2.3",
    "@nestjs/core": "8.2.3",
    "@nestjs/graphql": "10.0.0",
    "@nestjs/platform-express": "8.2.3",
    "apollo-server-express": "3.6.2",
    "dotenv": "^16.0.0",
    "graphql": "15.7.2",
    "graphql-tools": "8.0.0",
    "graphql-upload": "^13.0.0",
    "jsonwebtoken": "^8.5.1",
    "reflect-metadata": "0.1.13",
    "rimraf": "3.0.2",
    "rxjs": "7.4.0",
    "ts-morph": "12.2.0"
  }
Enter fullscreen mode Exit fullscreen mode

With the latest Migration https://docs.nestjs.com/graphql/migration-guide
its now easy to build a simple apollo federation gateway without using any other external library

import { RemoteGraphQLDataSource } from '@apollo/gateway';
import {
  Module,
  BadRequestException,
  HttpStatus,
  HttpException,
  UnauthorizedException,
  MiddlewareConsumer,
} from '@nestjs/common';
import { IntrospectAndCompose } from '@apollo/gateway';
import { ApolloGatewayDriver, ApolloGatewayDriverConfig } from '@nestjs/apollo';
import { GraphQLModule } from '@nestjs/graphql';
GraphQLModule.forRoot <
  ApolloGatewayDriverConfig >
  {
    driver: ApolloGatewayDriver,
    gateway: {
      supergraphSdl: new IntrospectAndCompose({
        subgraphs: [
          { name: 'User', url: 'http://localhost:5006/graphql' },
          { name: 'Home', url: 'http://localhost:5003/graphql' },
        ],
      }),
    },
  };
Enter fullscreen mode Exit fullscreen mode

With recent nestjs/graphql 10.x Migration we can just pass driver and same GraphqlModule will work as gateway Module

GraphQLModule.forRoot <
  ApolloGatewayDriverConfig >
  {
    driver: ApolloGatewayDriver,
  };
Enter fullscreen mode Exit fullscreen mode

And Gateway definition contains list of all sub-graph services


gateway: {
    supergraphSdl: new IntrospectAndCompose({
      subgraphs: [
        { name: 'User', url: 'http://localhost:5006/graphql' },
        { name: 'Home', url: 'http://localhost:5003/graphql' },
        { name: 'Booking', url: 'http://localhost:5004/graphql' },
      ],
    }),
  }
Enter fullscreen mode Exit fullscreen mode

Lets have e look into the whole definition of file

import { RemoteGraphQLDataSource } from '@apollo/gateway';
import {
  Module,
  BadRequestException,
  HttpStatus,
  HttpException,
  UnauthorizedException,
  MiddlewareConsumer,
} from '@nestjs/common';
import { IntrospectAndCompose } from '@apollo/gateway';
import { ApolloGatewayDriver, ApolloGatewayDriverConfig } from '@nestjs/apollo';
import { GraphQLModule } from '@nestjs/graphql';
import { verify, decode } from 'jsonwebtoken';
import { INVALID_AUTH_TOKEN, INVALID_BEARER_TOKEN } from './app.constants';
import { graphqlUploadExpress } from 'graphql-upload';

const getToken = (authToken: string): string => {
  console.log(authToken);
  const match = authToken.match(/^Bearer (.*)$/);
  if (!match || match.length < 2) {
    throw new HttpException({ message: INVALID_BEARER_TOKEN }, HttpStatus.UNAUTHORIZED);
  }
  console.log(match[1]);
  return match[1];
};

const decodeToken = (tokenString: string) => {
  const decoded = verify(tokenString, process.env.SECRET_KEY);
  if (!decoded) {
    throw new HttpException({ message: INVALID_AUTH_TOKEN }, HttpStatus.UNAUTHORIZED);
  }
  return decoded;
};
const handleAuth = ({ req }) => {
  try {
    if (req.headers.authorization) {
      const token = getToken(req.headers.authorization);
      const decoded: any = decodeToken(token);
      return {
        userId: decoded.userId,
        permissions: decoded.permissions,
        authorization: `${req.headers.authorization}`,
      };
    }
  } catch (err) {
    throw new UnauthorizedException('User unauthorized with invalid authorization Headers');
  }
};
@Module({
  imports: [
    GraphQLModule.forRoot <
      ApolloGatewayDriverConfig >
      {
        server: {
          context: handleAuth,
        },
        driver: ApolloGatewayDriver,
        gateway: {
          buildService: ({ name, url }) => {
            return new RemoteGraphQLDataSource({
              url,
              willSendRequest({ request, context }: any) {
                request.http.headers.set('userId', context.userId);
                // for now pass authorization also
                request.http.headers.set('authorization', context.authorization);
                request.http.headers.set('permissions', context.permissions);
              },
            });
          },
          supergraphSdl: new IntrospectAndCompose({
            subgraphs: [
              { name: 'User', url: 'http://localhost:5006/graphql' },
              { name: 'Home', url: 'http://localhost:5003/graphql' },
              { name: 'Booking', url: 'http://localhost:5004/graphql' },
            ],
          }),
        },
      },
  ],
})
export class AppModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(graphqlUploadExpress()).forRoutes('graphql');
  }
}
Enter fullscreen mode Exit fullscreen mode

This contains a lots of code, lets talk about all these one by one

  • this gateway is composing all subgraphs
  • this gateway is managing authorization also by decoding token
  • this gateway is building a request resource by RemoteGraphQLDataSource before making actual api call to downstream service
  • this gateway is sending downstream request to list of a particular subgraphs based on what client in requesting from query 
GraphQLModule.forRoot <
  ApolloGatewayDriverConfig >
  {
    server: {
      context: handleAuth,
    },
  };

const handleAuth = ({ req }) => {
  try {
    if (req.headers.authorization) {
      const token = getToken(req.headers.authorization);
      const decoded: any = decodeToken(token);
      return {
        userId: decoded.userId,
        permissions: decoded.permissions,
        authorization: `${req.headers.authorization}`,
      };
    }
  } catch (err) {
    throw new UnauthorizedException('User unauthorized with invalid authorization Headers');
  }
};
Enter fullscreen mode Exit fullscreen mode

context handleAuth will validate authorization header and return data in context so we can access context payload further

buildService: ({ name, url }) => {
  return new RemoteGraphQLDataSource({
    url,
    willSendRequest({ request, context }: any) {
      request.http.headers.set('userId', context.userId);
      // for now pass authorization also
      request.http.headers.set('authorization', context.authorization);
      request.http.headers.set('permissions', context.permissions);
    },
  });
};
Enter fullscreen mode Exit fullscreen mode

buildService is building a request for all sub-graphs by sending data in headers from context, in this example we are sending user meta data in headers for the request.

So this is all about our gateway service which can talk and compose all sub-graphs into one single api endpoint.
After starting application

[Nest] 6612  - 05/23/2022, 11:25:39 AM     LOG [NestFactory] Starting Nest application...
[Nest] 6612  - 05/23/2022, 11:25:39 AM     LOG [InstanceLoader] AppModule dependencies initialized +30ms
[Nest] 6612  - 05/23/2022, 11:25:39 AM     LOG [InstanceLoader] GraphQLSchemaBuilderModule dependencies initialized +1ms
[Nest] 6612  - 05/23/2022, 11:25:39 AM     LOG [InstanceLoader] GraphQLModule dependencies initialized +0ms
[Nest] 6612  - 05/23/2022, 11:25:39 AM     LOG [NestApplication] Nest application successfully started +190ms
Enter fullscreen mode Exit fullscreen mode

Our gateway is ready but we must also need all these sub-graphs ready otherwise it will throw error, so our first task is to get all these sb-graphs running on all those ports

            { name: 'User', url: 'http://localhost:5006/graphql' },
            { name: 'Home', url: 'http://localhost:5003/graphql' },
            { name: 'Booking', url: 'http://localhost:5004/graphql' },
Enter fullscreen mode Exit fullscreen mode

Now lets build simple graphql services so we can see how we can share data across different microservice and how this gateway is composing data together

Conclusion

This was just a quick introduction on what is apollo graphql federation gateway, lets explore more about this in our next Blog where we will check actual code implementation of graphql Gateway in nestjs.

References

Image
New to Frontend Engineering: 8 Things To Stop Doing

frontend, beginners, programming, tutorial
Image
The 3 Most Significant Disasters In Couch The Couch's 3 Biggest Disasters In History
Image
10 Things People Get Wrong About Coffee Makers Drip
Image
Seasons of Sips: 700ml Christmas Mugs for the Cozy Coffee Lover
Image
Global U.S. Market for 4G/5G Industrial Smart IoT Gateways: Exploring Growth, Applications, and Future Trends:
Image
ุดุฑูƒุฉ ุชู†ุธูŠู ุงูุฑุงู† ุจุงู„ุฑูŠุงุถ

cleancode, opensource, programming, react
Image
oxandrolon kaufen
Image
Scalable ETL pipeline for Google Merchant XML Feed and RDS with AWS Glue

aws, etl, googlemerchant, rds
Image
๐Ÿš€ Your Daily Crypto Job Digest For 03 November!! ๐Ÿš€

hiring, whoishiring, web3
Image
Kubernetes Pods

kubernetes, containers, devops
Image
Crafting Comfort: Joy Cho's 5 Secrets to a Cozy Home Makeover
Image
Crafting Comfort: Joy Cho's 5 Secrets to a Cozy Home Makeover
Image
If You've Just Purchased Spare Car Key Price ... Now What?
Image
Java , Spring Migration

java, learning, webdev, api
Image
NUMBER ZAKI

codepen
Image
Is Dealing With ADHD Without Medication The Greatest Thing There Ever Was?
Image
Micro Trend Analysis Market: Exploring Niche Shifts and Emerging Consumer Behaviors:
Image
Why Injury Compensation Is More Difficult Than You Imagine
Image
How to Deal with Free Riders in Team Projects - A Guide to Managing Teamwork Challenges

teamwork, collaboration, accountability, conflict
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .