Engineer at Airbnb·

At Airbnb we use GraphQL Unions for a "Backend-Driven UI." We have built a system where a very dynamic page is constructed based on a query that will return an array of some set of possible “sections.” These sections are responsive and define the UI completely.

The central file that manages this would be a generated file. Since the list of possible sections is quite large (~50 sections today for Search), it also presumes we have a sane mechanism for lazy-loading components with server rendering, which is a topic for another post. Suffice it to say, we do not need to package all possible sections in a massive bundle to account for everything up front.

Each section component defines its own query fragment, colocated with the section’s component code. This is the general idea of Backend-Driven UI at Airbnb. It’s used in a number of places, including Search, Trip Planner, Host tools, and various landing pages. We use this as our starting point, and then in the demo show how to (1) make and update to an existing section, and (2) add a new section.

While building your product, you want to be able to explore your schema, discovering field names and testing out potential queries on live development data. We achieve that today with GraphQL Playground, the work of our friends at #Prisma. The tools come standard with Apollo Server.

#BackendDrivenUI

READ LESS
How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo (medium.com)
38 upvotes·4 comments·2.1M views
Brandon Wilmott
Brandon Wilmott
·
February 20th 2022 at 3:19PM

Adam, is this stack up to date? Any additions ? Thanks in advance

·
Reply
Reeshi Gupta
Reeshi Gupta
·
March 26th 2024 at 5:59AM

hey adam wanted to understand how do you assess the data quality what tool do you use

·
Reply
Reeshi Gupta
Reeshi Gupta
·
March 26th 2024 at 5:59AM

hey adam wanted to understand how do you assess the data quality what tool do you use

·
Reply
Reeshi Gupta
Reeshi Gupta
·
March 26th 2024 at 5:59AM

hey adam wanted to understand how do you assess the data quality what tool do you use

·
Reply
Avatar of Adam Neary

Adam Neary

Engineer at Airbnb