How do you implement schema stitching or federation for a micro-frontend GraphQL architecture in NestJS?

Q: How do you implement schema stitching or federation for a micro-frontend GraphQL architecture in NestJS?

// npm i @apollo/subgraph @nestjs/apollo // users-service — declare User as a federated entity @ObjectType() @Directive('@key(fields: "id")') export class User { @Field(() => Int) id: number; @Field() email: string; } @Resolver(() => User) export class UsersResolver { // Gateway calls this to resolve User by id from another subgraph @ResolveReference() resolveReference(ref: { __typename: string; id: number }): Promise { return this.usersService.findOne(ref.id); } } // posts-service — extend User from users-service @ObjectType() @Directive('@extends') @Directive('@key(fields: "id")') export class User { @Field(() => Int) @Directive('@external') id: number; @Field(() => [Post]) posts: Post[]; } // Gateway — stitches subgraph schemas into a supergraph GraphQLModule.forRoot ({ driver: ApolloGatewayDriver, server: { cors: true }, gateway: { supergraphSdl: new IntrospectAndCompose({ subgraphs: [ { name: 'users', url: 'http://users-service/graphql' }, { name: 'posts', url: 'http://posts-service/graphql' }, ], }), }, }) @key(fields: 'id') — marks an entity that can be referenced and resolved across subgraphs. @ResolveReference() — the method the gateway calls when it needs to resolve an entity by its key. @extends and @external — used in subgraphs that extend an entity defined in another subgraph. IntrospectAndCompose — gateway introspects running subgraph schemas and composes a unified supergraph. Each service is independently deployable — the gateway handles schema composition at query time.

Difficulty: 8/10

schema stitching, Apollo federation, NestJS micro‑frontend

Use Apollo Federation where each NestJS service declares its own subgraph schema. Mark federated entities with @Directive('@key') and implement @ResolveReference() so the gateway can fetch them by ID. The gateway uses ApolloGatewayDriver with IntrospectAndCompose to stitch all subgraph schemas into a unified supergraph.

Apollo Federation subgraph and gateway setup

Apollo Federation key concepts:

1
@key(fields: 'id') — marks an entity that can be referenced and resolved across subgraphs.
2

How do you implement schema stitching or federation for a micro-frontend GraphQL architecture in NestJS?

Difficulty: 8/10

schema stitching, Apollo federation, NestJS micro‑frontend

Use Apollo Federation where each NestJS service declares its own subgraph schema. Mark federated entities with @Directive('@key') and implement @ResolveReference() so the gateway can fetch them by ID. The gateway uses ApolloGatewayDriver with IntrospectAndCompose to stitch all subgraph schemas into a unified supergraph.

Apollo Federation subgraph and gateway setup

Apollo Federation key concepts:

1
@key(fields: 'id') — marks an entity that can be referenced and resolved across subgraphs.
2

How do you implement schema stitching or federation for a micro-frontend GraphQL architecture in NestJS?

How do you implement schema stitching or federation for a micro-frontend GraphQL architecture in NestJS?

Scenario Questions

Follow-up Questions