Added a BFF layer before reaching for GraphQL. What happened next?
TL;DR: One table page was making 1 + 1 + N network calls and pulling every bill into the browser. A thin server layer that speaks "one screen at a time" fixed it. Three months later it runs 80 routes across 9 features, and it caught a cross-user data leak before it shipped. Before: a React app talking straight to the back-end. Standard setup. React, React Query, generated API client. Every page…
Before, a React app directly communicated with the back-end, making three network calls for each page: one to retrieve all bills, another for the summary strip, and an additional call per bill to fetch approvers. This approach led to the N+1 problem, resulting in 50+ requests when viewing 50 rows, causing the browser to download the entire bill corpus for the first page.
The UI had to re-implement bill-to-approver joins and auth checks on each screen, leading to maintenance issues. A GraphQL solution could have addressed the shape problem but not the location of joins and authentication. The solution was to introduce a BFF (Backend For Frontend), a set of resource routes on the existing Express server, which served exactly one screen each.
This reduced the browser request to a single call per screen, with the BFF handling permission checks, caching per user, server-side computation, and returning only the required data. The BFF layer also addressed issues like N+1 calls, duplication of bill-to-approver joins, and cross-user data leaks, without requiring a new infrastructure.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
