GraphQL

20 posts

figma2 min readCurated summary

Keeping It 100(x) With Real-time Data At Scale | Figma Blog

Figma’s LiveGraph powers real-time collaboration by subscribing to GraphQL-like queries and updating clients automatically. Rapid growth—tripled sessions since 2021 and fivefold view-request growth in one year—exposed limits in its single-server, mutation-based architecture. Figma launched “LiveGraph 100x,” a redesign focused on scaling reads and database updates while preserving performance and enabling a safe migration. ## LiveGraph’s Role in Figma - LiveGraph keeps data synchronized across collaborative features such as: - File editing - Comments - FigJam voting - It exposes a web API for subscribing to GraphQL-like queries. - Results are returned as JSON trees based on a schema of entities, relationships, and views. - A custom React Hook automatically re-renders interfaces when subscribed data changes. ## The 100x Scaling Initiative Figma’s growing user base increased both the number and cost of LiveGraph client sessions. At the same time, the underlying database evolved from one PostgreSQL instance into vertically and horizontally sharded infrastructure. The redesigned system needed to: - Preserve or improve service-level objectives for initial loads and updates. - Support more database shards reliably and efficiently. - Scale reads and database-update processing independently. - Allow incremental, transparent migrations without disrupting users. ## Limitations of the Original Architecture Originally, LiveGraph consisted of: - A single LiveGraph server. - An in-memory query cache. - One PostgreSQL instance. - A cache that tailed PostgreSQL’s logical replication stream. PostgreSQL writes row mutations to its write-ahead log, including pre- and post-row images and a monotonically increasing sequence number. LiveGraph used these mutations to update cached query results directly rather than recomputing them. This design worked well at smaller scale because: - All updates came from one primary database. - The replication stream provided a global ordering. - Each row mutation could be applied directly to the relevant cached results. ## Sharding Breaks Global Ordering As the original PostgreSQL instance reached capacity, Figma introduced vertical shards and began moving toward broader horizontal scaling. This invalidated the assumption that all database updates arrive in one globally ordered stream. - Multiple shards can generate updates simultaneously. - Their updates have no guaranteed global order. - LiveGraph therefore needed an architecture that could process distributed database changes while maintaining reliable, timely query updates. The growing load made it necessary to rethink LiveGraph fundamentally rather than continue extending its single-database design.

Read original(opens in new tab)
figma3 min readCurated summary

LiveGraph: real-time data fetching at Figma | Figma Blog

LiveGraph is Figma’s in-house real-time data-fetching layer built on PostgreSQL. It lets frontend developers declare live data views with GraphQL-like queries, while LiveGraph reads PostgreSQL’s replication stream to deliver updates within milliseconds. Figma built it to replace fragile, manually maintained client events and to support real-time subscriptions at large scale without relying on polling or a new database technology. ## Problems with Figma’s Earlier Real-Time Architecture - React clients initially loaded large data sets through Ruby HTTP endpoints and stored them in Redux. - Backend code manually emitted events whenever database records changed. - Frontends subscribed over WebSockets and applied those events to client state. - As data volumes grew, Figma split requests into incremental loads, making data ownership and availability harder to reason about. - Complex changes—such as permission updates affecting many resources—were difficult to represent with individual events. - Events could arrive out of order or fail to correspond reliably with database writes, causing client state to diverge from server state. ## Why Figma Chose Live Queries - Figma wanted developers to define data subscriptions declaratively rather than manually coordinate fetches and update events. - GraphQL provided a natural interface for describing the relevant portion of the object graph. - LiveGraph uses “live queries,” which keep query results synchronized, rather than GraphQL subscriptions in the narrower sense of consuming event streams. - The system is a query and data-fetching layer over existing PostgreSQL infrastructure, not a replacement persistence layer. ## In-House System Versus Existing Tools - Figma’s multiplayer service handles collaborative writes and conflict resolution within individual files, whereas LiveGraph focuses on reading application data. - Systems such as Hasura, Prisma, and PostGraphile offered GraphQL subscription features but were not designed primarily for Figma’s scale of concurrent live subscriptions. - Polling was rejected because it increases database load and requires developers to choose polling intervals for each query. - Figma’s collaborative product made real-time data central enough to justify building and operating a specialized internal system. - The company did not claim LiveGraph was universally superior; its value came from matching Figma’s specific scale and requirements. ## Replication-Stream-Based Updates - LiveGraph executes queries directly against PostgreSQL. - It tails the database replication log to detect changes instead of repeatedly polling tables. - Reading the replication stream enables update latency measured in milliseconds. - Because the system must process the complete volume of database changes, its architecture needs to distribute updates across machines and database shards. - This approach separates the complexity of detecting database changes from product code, allowing frontend engineers to work with declarative JSON data views. ## Frontend API - Product developers send GraphQL-like queries and receive results as JSON trees. - A schema defines server-side entities and relationships, while views expose queryable subsets of that graph. - The frontend can therefore request the data it needs and rely on LiveGraph to keep the result synchronized as the underlying PostgreSQL data changes. LiveGraph’s central recommendation is architectural: derive live client views from the database’s authoritative change stream rather than maintaining a parallel network of hand-written events. For organizations with similar scale and real-time requirements, this can improve consistency and simplify product development, though Figma’s in-house approach was justified by its unusually collaborative workload.

Read original(opens in new tab)
airbnb3 min readCurated summary

Taming Service-Oriented Architecture Using A Data-Oriented Service Mesh

Airbnb’s Viaduct rethinks the service mesh as a data-oriented layer rather than a network for routing procedural service calls. Built on GraphQL, it presents a unified data graph that hides microservice dependencies from consumers and improves modularity in large SOAs. The central schema can also coordinate service APIs, database models, and serverless data transformations, making system-wide changes more agile. ## The Problem with Large SOAs - Modern organizations may operate thousands of microservices connected through highly tangled dependency graphs. - These graphs resemble “spaghetti code” at the service level: - Changes become difficult to plan. - Teams must coordinate across many service boundaries. - Consumers often depend directly on multiple underlying services. - Airbnb argues that microservice architectures need stronger organizing principles and technical mechanisms for enforcing modularity. ## From Procedure-Oriented to Data-Oriented Design - Traditional procedural design groups procedures into modules with public APIs and hidden implementation details. - Data-oriented design instead organizes software around encapsulated data objects and the methods that operate on them. - Microservices have largely returned SOA to a procedural model: - Each service exposes collections of remote procedural endpoints. - Consumers must know which services provide the data they need. - Viaduct applies data-oriented principles to the service mesh itself. ## Viaduct’s GraphQL Data Mesh - Viaduct defines the mesh through a GraphQL schema containing: - Types and interfaces representing managed data. - Queries and subscriptions for reading data. - Mutations for updating data. - The schema forms a single graph spanning data owned by many microservices. - A consumer can navigate related data through one query, such as: - `productById { manufacturer }` - `productById { reviews }` - `productById { reviews { author } }` - Viaduct determines which services provide each requested field. - This hides service dependencies from consumers and prevents every client from building its own cross-service orchestration logic. ## The Central Schema - Unlike distributed GraphQL approaches that split schemas across modules or federated services, Viaduct treats the schema as one central artifact. - Airbnb uses schema-management primitives to let multiple teams collaborate while preserving a unified model. - Portions of the central schema can define individual microservice APIs. - Airbnb ultimately aims to use the same schema to define database structures. - This could improve “data agility”: - Database changes would no longer need manual translation through several API layers. - A single schema update could propagate changes from storage through services to clients. - Cross-team coordination and delivery times could be reduced. ## Serverless Derived Fields - Many SOAs contain stateless services that transform backend data for particular clients or presentation layers. - Viaduct supports derived fields computed by serverless cloud functions. - These functions operate on the graph without needing direct knowledge of the underlying microservices. - Moving transformation logic into stateless containers can: - Reduce the number of services. - Lower operational overhead. - Keep the core service graph simpler. ## Implementation and Operational Features - Viaduct is built on `graphql-java`. - It supports fine-grained field selection through GraphQL selection sets. - It uses data-loading techniques and an intra-request cache. - Reliability features include short-circuiting and soft dependencies. - Field-level observability shows which services consume particular data. - Its GraphQL interface enables use of established open-source tooling and interactive development tools. Viaduct’s practical recommendation is to place a unified data schema at the center of the architecture, allowing the mesh—not individual consumers—to manage service composition. This can make large SOAs more modular, easier to evolve, and better suited to serverless execution.

Read original(opens in new tab)
figma2 min readCurated summary

What’s new on DesignSystems.com: June roundup | Figma Blog

DesignSystems.com’s June 2019 roundup highlights the growing depth and diversity of design-systems practice. The featured articles cover icon creation, agency collaboration, accessible React architecture, and white-label customization. Together, they show how design systems can support consistency while remaining adaptable to different products, teams, and users. ## Iconography from Creation to Handoff - Bonnie Kate Wolf’s guide explains how to create, organize, and implement icons within a design system. - Topics include: - Strokes and fills - Boolean operations - Icon organization - Preparing assets for developer handoff - The guide is intended for both beginners and experienced icon designers. ## Building Design Systems with Clients - Instrument shares an agency perspective based on work with companies such as Nike, Google, Airbnb, Sonos, and LinkedIn. - The agency emphasizes complete, scalable systems rather than one-off design solutions. - Its process depends on close collaboration with clients to establish a shared understanding of: - What a design system should provide - How reusable components will work - How the system can support multiple applications ## Accessible React Containers - Zendesk’s Garden design system introduced “containers” to share keyboard and accessibility behavior across React components. - These containers: - Render no user interface - Handle keyboard and mouse interactions - Support right-to-left layouts - The new open-source `react-containers` library separates these behaviors from Garden’s styling package. - The containers were rewritten to be smaller, more efficient, and more closely aligned with WAI-ARIA Authoring Practices 1.1. ## White-Labeling and User Customization - Dawn Labs developed a system that lets third-party users customize an application while preserving overall consistency. - Its implementation combines: - `styled-components` - `styled-system` - A GraphQL backend - Because users needed more control, the team created a styling escape hatch using global CSS injection and CSS variables. - This approach allows end users to customize the interface without requiring intervention from the original client. The roundup demonstrates that effective design systems must balance structure with flexibility. Teams can use shared standards, accessible component patterns, and controlled customization to create systems that scale across products and audiences.

Read original(opens in new tab)
figma2 min readCurated summary

Want Figma API inspiration? Here’s 8 community-powered projects | Figma Blog

Figma’s 2018 Web API launch quickly inspired developers and designers to build integrations beyond the core product. The projects showcased range from no-code utilities, such as PDF export and style-guide generation, to developer tools for GraphQL, React rendering, and design-to-code workflows. Together, they demonstrate the API’s potential to connect Figma with everyday design and engineering processes. ## Integrations for Designers - **PDF exporter:** Gweltaz Calori created a website that exports selected Figma frames as PDFs from a pasted file URL. The project is open source on GitHub. - **Style-guide generator:** Freighter’s tool analyzes a Figma document and generates a style-guide page containing its fonts, colors, and other styles. - **Alexa integration:** Jon Gold built a voice interface capable of reading Figma comments through Alexa, illustrating unconventional uses of the API. ## Tools for Developers - **Figma.js:** Jon Gold also released an unofficial JavaScript wrapper to simplify building Figma API integrations. - **GraphQL connector:** Bernardo Raposo, with Sara Vieira, used the JavaScript library to create an open-source connector that lets developers query Figma through GraphQL. - **Figma-to-React workflows:** PageDraw introduced a React integration, while Sara Vieira demonstrated rendering React components directly from Figma through the GraphQL connector. - **Additional converter:** Florian Nagel built another Figma-to-React converter, with plans to open-source it. ## Broader Implications - The API makes design-to-development handoff easier to automate. - Community projects show potential for exporting Figma designs into other formats and frameworks. - Open-source libraries and integrations allow others to build on early experiments rather than starting from scratch. - These are third-party projects, so users must consider their permissions, reliability, and ongoing maintenance. Figma’s early API ecosystem suggests strong potential for automated design workflows, especially integrations that translate Figma files into documentation, code, and developer-ready assets.

Read original(opens in new tab)