stack-profile:backend-for-frontend
Backend for Frontend — BFF (TypeScript, Express, GraphQL, React, Docker) overview
A Backend for Frontend pattern where a thin TypeScript/Express server aggregates and reshapes data from multiple downstream microservices into a single GraphQL API tailored to the React frontend's exact needs. The BFF eliminates over-fetching by composing precisely the data shapes each page component requires, using GraphQL resolvers that fan out to REST or gRPC backends. Apollo Client on the frontend provides normalized caching and optimistic updates. Docker containers deploy the BFF alongside the frontend. The tradeoff is an additional service to maintain and the risk of the BFF becoming a "god layer" if not scoped carefully, but the pattern dramatically improves frontend performance and developer experience.
Attributes
Outgoing edges
- domain:fullstack·DomainFullstack
- domain:web-development·DomainWeb Development
- language:typescript·LanguageTypeScript
- library:express·LibraryExpress
- library:graphql-tools·LibraryGraphQL Tools
- library:apollo-client·LibraryApollo Client
- framework:react·FrameworkReact
- library:zod·LibraryZod
- tool:docker·ToolDocker
- tool:graphql-codegen·ToolGraphQL Code Generator
- workflow:graphql-schema-review·WorkflowGraphQL Schema Review
- workflow:api-design-review·WorkflowAPI Design Review
- skill-area:graphql-schema-design·SkillAreaGraphQL Schema Design
- skill-area:backend-api-design·SkillAreaBackend API Design
- skill-area:data-fetching-caching·SkillAreaData Fetching and Caching
- skill-area:react-components·SkillAreaReact Component Design
- skill-area:middleware-design·SkillAreaMiddleware
- role:fullstack-engineer·RoleFullstack Engineer
- role:frontend-engineer·RoleFrontend Engineer
- role:backend-engineer·RoleBackend Engineer