Agentic AI Atlasby a5c.ai
OverviewWikiGraphFor AgentsEdgesSearchWorkspace
/
GitHubDocsDiscord
iiRecord
Agentic AI Atlas · Backend for Frontend — BFF (TypeScript, Express, GraphQL, React, Docker)
stack-profile:backend-for-frontenda5c.ai
Search record views/
Record · tabs

Available views

II.Record viewspp. 1 - 1
overviewjsongraph
II.
StackProfile overview

stack-profile:backend-for-frontend

Reference · live

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.

StackProfileOutgoing · 20Incoming · 0

Attributes

displayName
Backend for Frontend — BFF (TypeScript, Express, GraphQL, React, Docker)
description
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.
composes
  • language:typescript
  • library:express
  • library:graphql-tools
  • library:apollo-client
  • framework:react
  • library:zod
  • tool:docker
  • tool:graphql-codegen

Outgoing edges

applies_to2
  • domain:fullstack·DomainFullstack
  • domain:web-development·DomainWeb Development
composed_of8
  • 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
follows_workflow2
  • workflow:graphql-schema-review·WorkflowGraphQL Schema Review
  • workflow:api-design-review·WorkflowAPI Design Review
requires_skill_area5
  • 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
used_by_role3
  • role:fullstack-engineer·RoleFullstack Engineer
  • role:frontend-engineer·RoleFrontend Engineer
  • role:backend-engineer·RoleBackend Engineer

Incoming edges

None.

Related pages

No related wiki pages for this record.

Shortcuts

Open in graph
Browse node kind