This project extends the original Relay Newsfeed example to demonstrate a federated GraphQL architecture using Node resolver pattern. It showcases how to implement Global Object Identification in a federated GraphQL setup while maintaining the powerful features of Relay.
The application implements a federated GraphQL architecture with:
- A main business service handling core domain logic (easily extensible to multiple business services)
- A dedicated Node resolver service implementing the Global Object Identification Specification
- A GraphQL Hive Gateway that composes the federated schema
- A Relay-powered React frontend
- An image processing service for asset optimization (used in the app to showcase fragment arguments)
This is a development-focused example project demonstrating the integration of Relay with GraphQL Federation. To get started:
- Clone the repository
- Install dependencies:
npm install
- Start the development environment:
npm run dev
This will concurrently start all necessary services:
- 👉 Frontend: http://localhost:3000
- GraphQL Hive Gateway: http://localhost:4000
- Business Service: http://localhost:8081
- Node Resolver Service: http://localhost:8082
- Image Processing Service: http://localhost:3003
npm run dev- Starts all services concurrentlynpm run watch-webpack- Runs webpack dev server for frontendnpm run watch-relay- Watches for changes and regenerates Relay artifactsnpm run watch-hive-gateway- Runs the federation gatewaynpm run watch-supergraph- Watches and rebuilds the supergraph schemanpm run watch-business- Runs the business service with hot reloadnpm run watch-node- Runs the node resolver service with hot reloadnpm run watch-image-server- Runs the image processing servicenpm run relay- One-time generation of Relay artifactsnpm run build- Build the applicationnpm run tsc- Type checkingnpm run prettier- Code formattingnpm run lint- Code linting
/src- React frontend application/components- React components/relay- Relay configuration and environment
/services- GraphQL Federation services/business- Main business logic service (template for additional business services)/node- Node resolver implementation
/supergraph- Federation composition logicwebpack.config.js- Webpack configuration with dev server proxiesrelay.config.json- Relay compiler configurationtsconfig.json- TypeScript configurationbabel.config.json- Babel configuration for React and Relay
This example implements the Global Object Identification Specification in a federated architecture. The Node resolver service provides a unified way to resolve any object by its global ID, while the business services maintain the actual data.
Key implementation details:
- Global IDs are base64 encoded strings combining type and local ID
- The Node interface is implemented across federated services
- The Node resolver service provides centralized object resolution
- Multiple business services can implement their own types while maintaining global identification
The architecture is designed to be extensible. To add a new business service:
- Copy the template from
/services/business - Define your service-specific schema extending the Node interface
- Implement resolvers for your types
- Add the service to the
SERVICESarray in/supergraph/index.mjs - Update the gateway configuration if needed
The Node resolver pattern shines in this setup as it provides a unified way to resolve objects across all business services while maintaining clean separation of concerns.
In this example, node field is queried for fetching comments on each story (StoryCommentsSection component). Additionally it is also used when hovering over user avatars (PosterDetailsHovercardContents component)