{
  "id": 7599410,
  "title": "Added a BFF layer before reaching for GraphQL. What happened next?",
  "url": "https://urgent.news/2026/09/15/added-a-bff-layer-before-reaching-for-graphql-what-happened-next",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-15T17:50:27.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ninawekunal3/added-a-bff-layer-before-reaching-for-graphql-what-happened-next-c0f"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "React app made three network calls per page, causing N+1 problem",
    "Introduced BFF (Backend For Frontend) to reduce requests to one per screen",
    "BFF handled permission checks, caching, server-side computation, and data filtering"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}