How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo

Demystifying My GraphQL Summit Talk

Adam Neary
Dec 5, 2018 · 12 min read

GraphQL Unions for Backend-Driven UI

The existing state for the product at the beginning of the talk presupposes 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.

Explore Your Schema With Playground

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.

View Your Schema in VS Code with the Apollo Plugin

One of the joys I wanted to demonstrate in the talk is having so many helpful tools at my fingertips while building our product. This includes access to Git in VS Code, as well as the integrated terminal and tasks for running frequently-needed commands.

Automatically Generate Types

The goal with Codegen is to benefit from strong type safety without having to manually create TypeScript types or React PropTypes. This is critical because our query fragments are distributed among the components that use them. This is why making a 1-line change to a query fragment results in 6–7 files being updated; because that same fragment appears in numerous places in the query hierarchy — in parallel to the component hierarchy.

Isolate your UI Changes with Storybook

The tool we use for editing UI is Storybook. It is the perfect place to make sure your work aligns with designs to the pixel across breakpoints. You get fast hot module reloading and a couple checkboxes to enable/disable browser features like Flexbox.

Automatically Retrieve Mock Data

To supply Storybook and our unit tests with realistic mock data, we want to extract the mock data directly from our Shared Development Environment. As with codegen, even a small change in a query fragment should also trigger many small changes in mock data. And here, similarly, the hard part is tackled entirely by Apollo CLI, and you can stitch it together with your own code in no time.

Add Screenshot Testing to Code Review with Happo

Happo is a straight up life-saver. It is the only screenshot testing tool I’ve ever used, so I would not be sophisticated enough to compare it to alternatives, if there are any, but the essential idea is that you push code, and it goes off and renders all the components in your PR, comparing it with the version on master.

Generate New Files with Yeoman

If you need to scaffold a bunch of files multiple times, you should build a generator. It will turn you into an army of you. I was shocked following the talk by how many people thought we had a flotilla of infrastructure engineers working on what I showed in that video. Other than the AST Transformations (which I will address next), this was just three template files and this puppy:

Use AST Explorer to Learn How to Edit Existing Files

The tricky part for Yeoman generators is to edit existing files. But with Abstract Syntax Tree (AST) transformations, the task is made much easier.

  1. Of the two Object Expressions, the one with multiple properties is our Section Mapping, and we will insert a key/value pair there.
  2. The Tagged Template Literal is our gql fragment, and we want to insert 2 lines there, the first being a Member Expression and the second being one of a set of “quasi” expressions. (Hmm…)

Extract Mock Content from Zeplin or Figma

Zeplin and Figma are both built to allow engineers to extract content directly to facilitate product development.

Automate Photo Processing…By Building Media Squirrel?

The photo processing pipeline is most certainly an Airbnb-specific thing. The piece I wanted to highlight was actually Brie’s contribution in creating “Media Squirrel” to wrap an existing API endpoint. Without Media Squirrel, we didn’t have a good way to convert raw images on our machines to JSON objects containing the content from our image processing pipeline, to say nothing for having static URLs we could use as image sources.

Intercept Schema and Data in Apollo Server

This part is still a work in progress as concerns the final API. The key things we wanted to do were (a) intercept a remote schema and modify it, and (b) intercept a remote response and modify it. The reason is that while the remote service is the source of truth, we want to be able to iterate on the product before formalizing something like a schema change in the upstream service.

In Conclusion

Much more important than any one of these tricks is the broader point about moving exceptionally fast and automating as much of the process as possible, particularly around boilerplate, types, and file creation.

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world where you can belong anywhere.

Thanks to Tim Rathschmidt.

Adam Neary

Written by

Software engineer @airbnb. Dad, pizzaiolo.

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world where you can belong anywhere.